Check if element has certain Class – jQuery

jQuery has inbuilt methods that allow searching for the certain class within the element.

By using them you can easily check class on the selector and perform the action according to the response.

In this tutorial, I am explaining the following 3 methods –

  • hasClass()
  • is()
  • attr()

Check if element has certain class - jQuery


Contents

  1. HTML and CSS
  2. hasClass()
  3. is()
  4. attr()
  5. Demo
  6. Conclusion

 


 

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

Click on the Check class button.


 

6. Conclusion

All the above-specified specified script helps you to find 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 (" ").

Spread the love

Related Post

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *