.hasClass()

Categories: Attributes | Manipulation > Class Attribute | CSS

.hasClass( className ) Returns: Boolean

Description: Determine whether any of the matched elements are assigned the given class.

version added: 1.2.hasClass( className )

classNameThe class name to search for.

Elements may have more than one class assigned to them. In HTML, this is represented by separating the class names with a space:

<div id="mydiv" class="foo bar"></div>

The .hasClass() method will return true if the class is assigned to an element, even if other classes also are. For example, given the HTML above, the following will return true:

$('#mydiv').hasClass('foo')

As would:

$('#mydiv').hasClass('bar')

While this would return false:

$('#mydiv').hasClass('quux')

Example:

Looks for the paragraph that contains 'selected' as a class.

<!DOCTYPE html>
<html>
<head>
  <style>
  p { margin: 8px; font-size:16px; }
  .selected { color:red; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  
  <p>This paragraph is black and is the first paragraph.</p>
  <p class="selected">This paragraph is red and is the second paragraph.</p>

  <div id="result1">First paragraph has selected class: </div>
  <div id="result2">Second paragraph has selected class: </div>
  <div id="result3">At least one paragraph has selected class: </div>
<script>
$("div#result1").append($("p:first").hasClass("selected").toString());
$("div#result2").append($("p:last").hasClass("selected").toString());
$("div#result3").append($("p").hasClass("selected").toString());
</script>

</body>
</html>

Demo:

Support and Contributions

Need help with .hasClass() or have a question about it? Visit the jQuery Forum or the #jquery channel on irc.freenode.net.

Think you've discovered a jQuery bug related to .hasClass()? Report it to the jQuery core team.

Found a problem with this documentation? Report it to the jQuery API team.

Anonymous

Does hasClass works with wild card * ?
Like $(‘#mydiv’).hasClass(‘bar*’)

http://paulirish.com Paul Irish

hasClass doesnt work with a wildcard…

The right answer is that you should also have a class on your elements that is only that prefix you’re looking for.

The other way to do this is…

!!$(‘#mydiv’).attr(‘class’).match(/bbar/)

That’ll look for all classes that start with ‘bar’

ViperArrow

Does hasClass work with a string of many classes or an array of classes?

Like $(this).hasClass(‘foo bar’) // Would this give the same result as $(this).hasClass(‘bar foo’)?
or $(this).hasClass( new Array(‘foo’, ‘bar’) )

ViperArrow

Ok, so I just tested this out:

$(this).hasClass(‘foo bar’) works, but only if the classes are in that order.
$(this).hasClass(‘bar foo’) produces a different result, and I guess that’s normal; that’s the result I would expect, personally.

$(this).hasClass( new Array(‘foo’, ‘bar’) ) does not work. The way I would expect this to work would be the same as
( $(this).hasClass( ‘foo’ ) && $(this).hasClass( ‘bar’ ) )

So I just wrote this short extension, which works as intended above:
jQuery.fn.hasClasses = function(classes)
{
var result = true;

for( i = classes.length – 1 ; i >= 0 && result ; i– )
{
result = $(this).hasClass( classes[i] );
}

return result;
};

ViperArrow

The same thing can be done to count the number of classes an element has from the classes in the parameter

jQuery.fn.countClasses = function(classes)
{
if( !(classes instanceof Array) )
{
classes = classes.split(‘ ‘);
}

var result = 0;

for( i = classes.length – 1 ; i >= 0 ; i– )
{
if( $(this).hasClass( classes[i] ) )
{
result++;
}
}

return result;
};

I also added a bit of code to split a String of classes (‘foo bar’) into an Array, so the function accepts both.
http://myr.luc.free.fr LucMorizur

Hi ;

I think that what Karl was saying, is that if you need to test if element <elem> has classes 'foo' or 'bar' or both these classes, you should write:
if ($(this).is('.foo, .bar'))</elem>

http://www.learningjquery.com/ Karl Swedberg

Rather than use .hasClass() for that, I’d recommend using .is(). $(this).is(‘.foo.bar’) would give the same result as $(this).is(‘.bar.foo’)
Brian Dichiara

What about if I wanted to check if it had ANY of the classes? .this OR .that Something built in for this?

http://www.learningjquery.com/ Karl Swedberg

separate the classes with a comma:
$(this).is('.foo, .bar')

http://myr.luc.free.fr LucMorizur

Hi ;

I think that what Karl was saying, is that if you need to test if element <elem> has classes 'foo' or 'bar' or both these classes, you should write:
if ($(this).is('.foo, .bar'))</elem>
Bronza

what's the method to get the className of an element!?
Dasiepi

if i add a class dinamically (say “active” ) with addClass and then check with hasClass it returns false.
http://www.imageworksstudio.com/ Jon Diamond

After further testing I believe this function will produce an unreliable result if the provided argument contains characters which are not valid in a class name.
Mitchell

That will only match the first in a list of space-separated classes. It will give a false negative for INPUT CLASS=”foo req-if-checked-bar”
Mirko

if(!$('tr').hasClass(“termid-24″)){
}
Pradeepa Kundapur

yeah Mikro ur r8

jQuery API