jQuery has inbuilt methods using which you can check if an HTML element contains a specific class.
You can conditionally perform the actions based on response.
In this tutorial, I am explaining the following 3 methods –
- hasClass()
- is()
- attr()
Contents
1. HTML and CSS
In the demonstration, using the following HTML layout and search for .red class within the <div> elements with jQuery.
<style>
.content{
width: 100px;
height: 100px;
display: inline-block;
color: white;
}
.red{
background: red;
}
.blue{
background: blue;
}
</style>
<div class='content red' id='div1'>div1</div>
<div class='content blue' id='div2'>div2</div>
<div class='content red' id='div3'>div3</div><br>
<input type='button' value='Check class' id='check'><br>
Result<br>
<ul id='result'></ul>
2. hasClass()
This takes class names as a parameter and searches in the element if its find then returns TRUE otherwise FALSE.
NOTE – Separate class names with space
(" ")if they are more than one.
Syntax –
.hasClass( Classname )
Example
Pass the search class name in the method.
<script>
$(document).ready(function(){
$('#check').click(function(){
// Class name to find
var findClass = 'red';
$('#result').empty();
// Loop all .content class elements
$('.content').each(function(){
// check class
if( $(this).hasClass(findClass) ){
$('#result').append("<li>"+this.id+"</li>");
}
});
});
});
</script>
3. is()
This matches the selector within the specified element. It also returns the Boolean value (TRUE/FALSE).
Syntax –
.is(selector)
Example
Pass the search class name in the method.
<script>
$(document).ready(function(){
$('#check').click(function(){
// Class name to find
var findClass = 'red';
$('#result').empty();
// Loop all .content class elements
$('.content').each(function(){
// check class
if ( $( this ).is( "."+findClass ) ) {
$('#result').append("<li>"+this.id+"</li>");
}
});
});
});
</script>
4. attr()
This method is used to get or set the attribute of the element.
Syntax –
$( selector ).attr( attributeName )
Example
Using attr() method to get the classes of an element and make an Array with it by split the value by space (" ") if there is more than one class.
With indexOf() method search a class name within the Array if it returns value greater than 0 then the class is available in the element.
<script>
$(document).ready(function(){
$('#check').click(function(){
// Class name to find
var findClass = 'red';
$('#result').empty();
// Loop all .content class elements
$('.content').each(function(){
// check class
var classes = $(this).attr("class");
var split_classes = classes.split(' ');
if( split_classes.indexOf(findClass) > 0){
$('#result').append("<li>"+this.id+"</li>");
}
});
});
});
</script>
5. Demo
6. Conclusion
All the above-specified specified script helps you to find a certain class within the element.
The hasClass() method is able to search single or multiple classes on the selector element. You only need to specify your classes name in the method separated by space (" ").
You can view this tutorial to know class searching using JavaScript.
If you found this tutorial helpful then don't forget to share.