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.
<div id=”container” class=”green blue”></div>
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
- Javascript interview Queand & Ans 2022 Beginners
- Best Computer Programming Courses to Get a Job
- Top 50 JavaScript Interview Questions Must Prepare
- Top 10 Programming Languages That Will Rule in 2021
- Difference Between JavaScript and JQuery
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
- Javascript interview Queand & Ans 2022 Beginners
- Best Computer Programming Courses to Get a Job
- Top 50 JavaScript Interview Questions Must Prepare
- Top 10 Programming Languages That Will Rule in 2021
- Difference Between JavaScript and JQuery
- How to check Password strength in jQuery with Demo
- How to Get Selected Option Value Using jQuery