jQuery API

.hasClass()

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

* All fields are required
  • 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