Updated April 1, 2023
Introduction to jQuery hasClass()
hasClass() method in jQuery basically checks if the selected element has a particular class assigned or not.
This method returns a boolean value.
- True if a particular class is assigned to the selected element.
- False if no class is assigned to the selected element.
An element can have more than one class assigned to it which can be represented by separating class names with a space.
Syntax:
jQuery has the following syntax to check if an element has a class assigned to it or not.
$(selector).hasClass(className);- selector refers to the selected element to be checked.
- className is a mandatory parameter which specifies the name of class to be searched for.
Examples of jQuery hasClass()
Given below are the examples:
Example #1
Code:
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function() {
$("button").click(function() {
alert($("p").hasClass("classId"));
});
});
</script>
<style>
.classId {
font-size: 30px;
color: rgb(110, 143, 110);
}
</style>
</head>
<body>
<h1>This is an example for jQuery hasClass() method</h1>
<p class="classId">This is my content.</p>
<p>This is some more content.</p>
<b><button style="color:rgb(88, 128, 23)"><b>Click here!</b></button>
</body>
</htmlOutput:
- Below screen displays when the page is first loaded in the browser.
- Till now, no activity has been performed.
- Once the button is clicked, an alert box pops up stating “true”.
- Here, hasClass() method checks for the class assigned to element “p”.
- Since, the element “p” has been assigned the same class name “classId” which hasClass() method has been looking for, it returns true.
Example #2
Let us consider an another example demonstrating the effect and implementation of jQuery hasClass() method.
Code:
<html>
<head>
<title>The jQuery hasClass() example</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function() {
//setting the textcontent for div elements based on the value returned by hasClass().
$("#div1").text($("#Id1").hasClass("red"));
$("#div2").text($("#Id2").hasClass("green"));
$("#div3").text($("#btn").hasClass("button"));
$("button").click(function() {
alert($("button").hasClass("button"));
});
});
</script>
<style>
.red {
color: red;
}
.yellow { color: yellow;
}
.green { color: green;
}
.button {
background-color: #33c5ff;
border: none;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 14px;
margin: 2px 3px;
cursor: pointer;
}
</style>
</head>
<body>
<h1 class="red" id="Id1">
This is an example for jQuery hasClass() method.
</h1>
<h2 class="green" id="Id2">
jQuery hasClass() checks if a selected element has a class or not.
</h2>
<button class="button" id="btn">Click here!</button>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</body>
</html>Output:
- Below screen displays when the page is first loaded in the browser.
- No activity has been performed till now.
- This page displays the Boolean values returned by hasClass() method for three different div.
- All the three values are true since the classes assigned to these div match with those specified in hasClass() method for three of them respectively.
- Once the button is clicked, an alert box displaying message “true” pops up.
- This is because the class assigned to the element “button” is same as the class specified in the hasClass() method.
Example #3
Following is an another example demonstrating the implementation and effect of jQuery hasClass() method.
Code:
<html>
<head>
<title>The jQuery hasClass() example</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function() {
//setting the textcontent for div elements based on the value returned by hasClass().
$("#div1").text($("#Id1").hasClass("red"));
$("#div2").text($("#Id2").hasClass("yellow"));
$("#div3").text($("#btn").hasClass("button"));
$("button").click(function() {
alert($("button").hasClass("green"));
});
});
</script>
<style>
.red {
color: red;
}
.yellow { color: yellow;
}
.green { color: green;
}
.button {
background-color: #33c5ff;
border: none;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 14px;
margin: 2px 3px;
cursor: pointer;
}
</style>
</head>
<body>
<h1 class="red" id="Id1">
This is an example for jQuery hasClass() method.
</h1>
<h2 class="green" id="Id2">
jQuery hasClass() checks if a selected element has a class or not.
</h2>
<button class="button" id="btn">Click here!</button>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</body>
</html>Output:
- The below screen displays when the page is first loaded in the browser.
- This returns true since the element “div1” has the class assigned “red” which matches with the class name passed to hasClass() parameter.
$("#div1").text($("#Id1").hasClass("red"));- This returns false since the element “div2” has the class assigned “green” which does not with the class name passed to hasClass() parameter.
$("#div2").text($("#Id2").hasClass("yellow"));- This returns true since the element “button” has the class assigned “button” which matches with the class name passed to hasClass() parameter.
$("#div3").text($("#Id3").hasClass("button"))
- Once the button is clicked, an alert box pops up stating a message “false”. This is because “button” element has been assigned class “button” but it is checking for class “green”.
Example #4
In this example, we have used some of li elements which are assigned class names such as red, yellow and green. Whenever a button is clicked, a matching class name li element would fade out.
Code:
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function() {
$(".button").click(function() {
var className = $(this).attr("id");
$("ul li").each(function() {
if ($(this).hasClass(className)) {
$(this)
.fadeTo("slow", 0.1)
.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: 10px;
}
ul li {
background-color: #528b7d; width: 80px;
margin: 10px; padding: 10px; width: 250px;
}
</style>
</head>
<body>
<h1>Example for jQuery hasClass() method</h1>
<ul>
<li class="red">Math</li>
<li class="yellow">English</li>
<li class="green ">Science</li>
</ul>
<input type="button" class="button" value="Math Class" id="red" />
<input type="button" class="button" value="English Class" id="yellow" />
<input type="button" class="button" value="Science Class" id="green" />
<input type="button" class="button" value="No Match" id="nomatch" />
</body>
</html>Output:
- The below screen displays when the page is first loaded in the browser.
- No activity has been performed till now.
- On clicking “English Class” button, English element fades out.
- Similarly, Math element fades out on clicking Math Class button and Science elements fades out on clicking Science Class button.
- For No Match button, no matching class is found, hence, no effect is seen when this button is clicked.
Conclusion
This article demonstrated the effect of jQuery hasClass() method and its implementation. If you need to check for an element whether it has been assigned a particular CSS class, use hasClass() method. This inbuilt method of jQuery checks if an element has a certain class name or not. jQuery also provides an another method, is() for the same purpose as hasClass(). Difference lies in their performance, hasClass() method is much faster than is() method.
Recommended Articles
This is a guide to jQuery hasClass(). Here we discuss the introduction to jQuery hasClass() along with the respective examples. You may also have a look at the following articles to learn more –
