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>
</html

Output:

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.

Quiz Result
Total Questions	Correct Answers	Wrong Answers	Percentage

Introduction to jQuery hasClass()

Examples of jQuery hasClass()

Example #1

Example #2

Example #3

Example #4

Conclusion

Recommended Articles

Follow us!

APPS

Blog

Courses

Email