jQuery .hasClass() method checks the existence of a class
Syntax and Description
.hasClass(className)
determines whether any of the matched elements are assigned the given class.
className is the class name to search for.
Its return value is a Boolean indicating whether the class is assigned to an element in the set.
<div id="mydiv" class="foo bar"></div>
Given the preceding HTML code, the following will return true:
$('#mydiv').hasClass('foo')
and
$('#mydiv').hasClass('bar')Check if an element has a certain class
The following code selects an element by an id and then
checks to see if it has selected class.
<html>
<head>
<script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){<!-- w ww . j ava2 s . c o m-->
alert($("div#result1").hasClass("selected").toString());
});
</script>
<style>
.selected { color:red; }
.highlight { background:yellow; }
</style>
</head>
<body>
<body>
<p>A</p>
<p>B</p>
<p>C</p>
<div id="result1"></div>
</body>
</html>
Verify the existence of a class just added
The following code adds selected class to last
paragraph. After that it uses the hasClass method to
check if the class has been added.
<html>
<head>
<script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){<!-- www .j a v a 2s.co m-->
$("p:last").addClass("selected highlight");
alert($("p:last").hasClass("selected").toString());
});
</script>
<style>
.selected { color:red; }
.highlight { background:yellow; }
</style>
</head>
<body>
<body>
<p>A</p>
<p>B</p>
<p>C</p>
</body>
</html>
Combine hasClass methods
The following code uses filter methods and two .hasClass
methods. Each .hasClass
methods reference its own class name.
<html>
<head>
<script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
<script type='text/javascript'>
$(document).ready(<!--from w w w .j a v a 2 s .c o m-->
function() {
$('li')
.filter(
function() {
return $(this).hasClass('my2') || $(this).hasClass('my3');
}
)
.addClass('mySelected');
}
);
</script>
<style type='text/css'>
ul {
list-style: none;
margin: 5px;
padding: 0;
}
li.mySelected {
background: #a1e6b2;
border: 4px solid #93daa4;
}
</style>
</head>
<body>
<ul>
<li class='my3'>A</li>
<li class='my2'>B</li>
<li class='my3'>C</li>
<li class='my2'>D</li>
<li class='my'>E</li>
</ul>
</body>
</html>