Skip to content
jQuery hasClass – Using hasClass method with jQuery if statement
In This Tutorial
jQuery hasClass method
The hasClass method of jQuery takes the class name as parameter and checks if a class exists in the specified element(s).
See an example of hasClass
In the jQuery hasClass method, if the class name is found in specified element it will return true and if not found it will return false.
On that basis, you may perform some actions like if a given class name is not found, you can add a class to that element, show some alert etc.
The example below will show you how to use jQuery if..else statement as well if the class is found or not with the hasClass method.
Syntax of hasClass method
The syntax of hasClass jQuery method is:
$(“element”).hasClass(“Class_to_be_found”);
Example of using hasClass with if..else statement
The example below will check if a class exists in a div element or not. As you click on the button “Click to check if a class exists in div” it will show a message in paragraph whether the class exists or not.
The code is handled in the if…else statement to show in the paragraph.
Experience this example online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
|
<html>
<head>
<script src=“http://code.jquery.com/jquery-1.10.1.min.js”></script>
<script>
$(document).ready(function(){
$(“button”).click(function(){
if ($(“div”).hasClass(‘hasclasstst’)) {
$(“p”).append(“Class exists!”);
}
else {
$(“p”).append(“Class does not exist!”);
}
});
});
</script>
<style>
.hasclasstst
{
border: dashed 1px;
color:green;
}
</style>
</head>
<body>
<div>This is Div element</div>
<p><b>Class exists or not? </b></p>
<button>Click to check if class exists in div</button>
</body>
</html>
|
Adding a class example
In the following example, if the given class does not exist in the specified element, by using jQuery hasClass method, we will add a class to add CSS to the div element by using jQuery addClass method.
Experience this example online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
|
<html>
<head>
<script src=“http://code.jquery.com/jquery-1.10.1.min.js”></script>
<script>
$(document).ready(function(){
$(“button”).click(function(){
if ($(“div”).hasClass(‘hasclasstst’)) {
$(“p”).append(“Class exists!”);
}
else {
$(“div”).addClass(“hasclasstst”);
$(“p”).append(“Class was not found in div, hasclasstst is added to div!”);
}
});
});
</script>
<style>
.hasclasstst
{
border: dashed 1px;
color:green;
}
</style>
</head>
<body>
<div>This is Div element</div>
<p><b>Class exists or not? </b></p>
<button>Click to check if class exists in div</button>
</body>
</html>
|
After you clicked the button and the class is added to the div element, if you click the button again it will check if the class exists or not in div element again. As class has been added, the message should be shown as “Class exists”.
Related jQuery addClass method | jQuery $.append | jQuery $.prepend
Leave A Comment?