How to check if element contains a Class using jQuery

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()

How to check if element contains a Class using 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

View 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.

Leave a Comment