jQuery Class Examples – Select Element With Single / Multiple Class
If you are wanting to know how use jQuery to target Class attribute of an element & if want to be able to select element with Single / Multiple Class, then this article is for you. In this article, I will show you how to select an element with just a single class & also select an element which has multiple classes applied to it. Read on to find out more.
How to use access the Class attribute of an element using jQuery
For the sake of the example, we are going to assume that we have few divs & each of these divs have at least one or more class applied to them.
Example: Complete HTML + jQuery source code
<html>
<head>
<title>Select Element With Single / Multiple Class in jQuery</title>
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
</head>
<body>
<div id="my_div1" class="my_class1">This is some content.</div>
<div id="my_div2" class="my_class1 my_class2">This is some content.</div>
<div id="my_div3" class="my_class3">This is some content.</div>
<div id="my_div4" class="my_class4 my_class3">This is some content.</div>
<div id="my_div5" class="my_class5 my_class1 my_class2 my_class3 myclass4">This is some content.</div>
<br>
<input type="submit" name="get1" id="get1" value="Get elements with my_class1" /><br>
<input type="submit" name="get2" id="get2" value="Get elements with my_class1 & my_class2" /><br>
<input type="submit" name="get3" id="get3" value="Get elements with my_class3" /><br>
<input type="submit" name="get4" id="get4" value="Get elements with my_class3 & my_class4" /><br>
<input type="submit" name="get5" id="get5" value="Get elements with my_class5" />
<script type="text/javascript">
$('#get1').click(function() {
alert( $(".my_class1").attr('id') );
});
$('#get2').click(function() {
$(".my_class1.my_class2").each( function() {
alert( $(this).attr("id") );
})
});
$('#get3').click(function() {
$(".my_class3").each( function() {
alert( $(this).attr("id") );
})
});
$('#get4').click(function() {
$(".my_class3.my_class4").each( function() {
alert( $(this).attr("id") );
})
});
$('#get5').click(function() {
$(".my_class5").each( function() {
alert( $(this).attr("id") );
})
});
</script>
</body>
</html>Select Element With Single / Multiple Class
In order to be able to show all elements with the corresponding class applied to it, it’s essential that we do it in a loop. Hence this looping is done by using the iterator function “each”. If “each” is not used, then only the first div that has the class applied will be shown & the following div will be ignored, even if it has the class applied to it.
So that’s how you use jQuery Class Selector to select element with single or multiple classes applied to it.
Simple, isn’t it?
Do you know of any other ways to use access class of an element using jQuery? Feel free to suggest by commenting below.