jQuery API

.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')

Example:

Looks for the class 'selected' on the matched elements.

<!DOCTYPE html>
<html>
<head>
  <style>

  p { margin: 8px; font-size:16px; }
  .selected { color:red; }
  .highlight { background:yellow; }
  </style>
  <script src="http://code.jquery.com/jquery-1.4.4.js"></script>
</head>
<body>
  <p>Hello</p>
  <p class="selected">Goodbye</p>
  <div id="result1">First paragraph has selected class: </div>

  <div id="result2">Last paragraph has selected class: </div>
  <div id="result3">Some 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:

User Contributions

  • Support requests, bug reports, and off-topic comments will be deleted without warning.

  • Please do post corrections or additional examples for .hasClass() below. We aim to quickly move corrections into the documentation.
  • If you need help, post at the forums or in the #jquery IRC channel.
  • Report bugs on the bug tracker or the jQuery Forum.
  • Discussions about the API specifically should be addressed in the Developing jQuery Core forum.
  • adrian
    how to select not hasclass ?
    say I want to select all tr row which is not class="termid-24"
  • Mirko
    if(!$('tr').hasClass("termid-24")){
    }
  • Use the :not() selector. $("tr:not(.termid-24)")
  • vincy6
    Is there a function for ID?
    example:
    hasId
  • Use either
    if ( $('some-selector').is('#myid') )
    or
    if ( $('#myid').length )
  • richoid
    This doesn't work:
    visible_img.hasClass('under').removeClass('over');

    This is the error: "visible_img.hasClass("under").removeClass is not a function"

    Why?
  • ViperArrow
    Richoid, hasClass returns a boolean value, not a jQuery object. Try something like

    if( visible_img.hasClass('under') )
    {
    visible_img.removeClass('over');
    }
  • richoid
    OK. Makes sense, thanks. I guess I just assumed that a 'true' result would pass to the next object in the chain.
  • ViperArrow
    I don't know how you select your visible_img, but I think you could work on your selector instead.

    for example, if right now you have:
    visible_img = $('div #id');
    if( visible_img.hasClass('under') )
    {
    visible_img.removeClass('over');
    }

    You could do:
    $('div #id.under').removeClass('over');
  • 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') )
  • Brian Dichiara
    What about if I wanted to check if it had ANY of the classes? .this OR .that Something built in for this?
  • separate the classes with a comma:
    $(this).is('.foo, .bar')
  • 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')
  • 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;
    };
  • 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>
  • 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.
  • mikhailt
    Does hasClass works with wild card * ?
    Like $('#mydiv').hasClass('bar*')
  • 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'