Jquery .hasClass() Method Example

In this jquery tutorial we will discuss about jquery .hasClass() function selector.hasClass( className ) – is used to check if an element has a particular class or not. The .hasClass() method will return true if the class name is assigned to an element other it returns false value.

Jquery .hasClass() Syntax

$(selector).hasClass(classname);

In below example we have two classes (‘green’ , ‘blue’) associated with div tag.

It would return true value

$( “#container” ).hasClass( “green” );

It would return true value

$( “#container” ).hasClass( “blue” );

It would return false value. As no matching class name found.

$( “#container” ).hasClass( “red” );

Related searches

Jquery .is() Function Complete Example

In this demo example I have couple of li elements which is associated with class names (red, green and blue) and on click of each button, I going to fade out matching class name li element.

<!DOCTYPE html>
<html>
   <head>
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
      <script>
         $(document).ready(function() {   
          $(".btn").click(function(){ 
           var className = $(this).attr("id");
           $("ul li").each(function() {     
            if ($(this).hasClass(className)) {
             $(this).fadeTo('slow', 0.5).fadeTo('slow', 1.0);      
            }
           });    
          }); 
         });
      </script>   
      <style>
         ul{
         font-family: monospace;
         font-size: 15px;
         font-family: monospace; 
         font-style: normal;
         font-size-adjust: none;
         width:200px;   
         padding:0px; 
         }
         ul li{
         background-color:#4585F3;
         width:100px;
         margin:5px;
         padding:5px;
         list-style-type:none;
         width:200px;
         }
      </style>
   </head>
   <body>
      <h1>Jquery .hasClass() function Example</h1>
      <ul>
         <li class="red">Red</li>
         <li class="green">Green</li>
         <li class="green red">Green Red</li>
         <li class="blue">Blue</li>
      </ul>
      <input type="button" class="btn" value="Red Class" id="red"> <input type="button" class="btn" value="Green Class" id="green"> <input type="button" class="btn" value="Blue Class" id="blue"> <input type="button" class="btn" value="No Matching Class" id="noclass"> 
   </body>
</html>

In this jquery tutorial we will discuss about jquery .hasClass() function. hasClass( className ) function is used to check if an element has a particular class or not. The .hasClass() method will return true if the class name is assigned to an element other it returns false value

Related searches for Jquery .hasClass() Method

Leave a Comment Cancel Reply