Determine if an element has a CSS class with jQuery

Question

I'm working with jQuery and looking to see if there is an easy way to determine if the element has a specific CSS class associated with it.

I have the id of the element, and the CSS class that I'm looking for. I just need to be able to, in an if statement, do a comparison based on the existence of that class on the element.

If you want to do it without jQuery, [“hasClass” with javascript?](http://stackoverflow.com/q/5085567/1529630) — Oriol, Jun 12 '16 at 17:23

score 238 · Accepted Answer · edited Aug 10 '11 at 18:20

238

Use the hasClass method:

jQueryCollection.hasClass(className);

or

$(selector).hasClass(className);

The argument is (obviously) a string representing the class you are checking, and it returns a boolean (so it doesn't support chaining like most jQuery methods).

Note: If you pass a className argument that contains whitespace, it will be matched literally against the collection's elements' className string. So if, for instance, you have an element,

<span class="foo bar" />

then this will return true:

$('span').hasClass('foo bar')

and these will return false:

$('span').hasClass('bar foo')
$('span').hasClass('foo  bar')

edited Aug 10 '11 at 18:20

Jeff May

457
2
16

answered Nov 04 '08 at 20:03

eyelidlessness

62,413
11
90
94

4

I disagree. The documentation's organized under categories, but you can easily see all the methods alphabetically as well. Everything comes with an example, and the comments section usually clears up anything that's left out. jQuery has a LOT of excellent functions and utilities and it takes some learning to discover them all. -EDIT- That makes sense, it's definitely come a long way. – Trafalmadorian May 20 '10 at 05:19
1

@Trafalmadorian, I've removed my original comment because the situation has changed. Originally you had posted everything before -EDIT-, and I replied that my comment about the documentation quality was no longer relevant but referred to their previous (MediaWiki) system. You then deleted your previous comment and reposed with the -EDIT-. I hope that this cleanup is a little clearer and less misleading to future readers. – eyelidlessness May 20 '10 at 18:05
@daniloquio, it is if you go directly to api.jquery.com ... for some reason the website still links to the awful wiki version at docs.jquery.com – eyelidlessness Aug 17 '12 at 20:02

Javier · Answer 2 · 2009-08-31T04:05:56.660

21

from the FAQ

elem = $("#elemid");
if (elem.is (".class")) {
   // whatever
}

or:

elem = $("#elemid");
if (elem.hasClass ("class")) {
   // whatever
}

edited Aug 31 '09 at 04:05

answered Nov 04 '08 at 20:04

Javier

60,510
8
78
126

3

careful with .is() - "The is() method in jQuery will return true if ANY of the elements in the current collection match ANY of the elements in the is-based collection" - http://www.bennadel.com/blog/1725-jQuery-s-is-Method-Checks-For-Any-Matching-Elements.htm – zack Sep 08 '10 at 11:38

score 11 · Answer 3 · answered Feb 18 '10 at 02:06

11

As for the negation, if you want to know if an element hasn't a class you can simply do as Mark said.

if (!currentPage.parent().hasClass('home')) { do what you want }

answered Feb 18 '10 at 02:06

VinnyG

6,883
7
58
76

score 3 · Answer 4 · answered Jan 10 '14 at 12:04

3

Without jQuery:

var hasclass=!!(' '+elem.className+' ').indexOf(' check_class ')+1;

Or:

function hasClass(e,c){
    return e&&(e instanceof HTMLElement)&&!!((' '+e.className+' ').indexOf(' '+c+' ')+1);
}
/*example of usage*/
var has_class_medium=hasClass(document.getElementsByTagName('input')[0],'medium');

This is WAY faster than jQuery!

answered Jan 10 '14 at 12:04

Ismael Miguel

4,185
1
31
42

why do you do `...&&!!((' '+e.classname+' ').indexOf(' '+c+' ')+1)`, and not just `&&!(' '+e.classname+' ').indexOf(' '+c+' ')`? – Blexy Apr 28 '14 at 18:49
1

Because `indexOf` returns `-1` is the class doesn't exist. If I do `!!-1`, it would be `true`. Since I'm doing `!!-1+1`, it will be false. A better way would be `...&&!!~(' '+e.className+' ').indexOf(' '+c+' ')`, but I didn't remembered it at the time. – Ismael Miguel Apr 28 '14 at 21:59
Sorry, I meant `...&&~(' '+e.className+' ').indexOf(' '+c+' ')` – Ismael Miguel Apr 29 '14 at 08:57

score 3 · Answer 5 · answered Feb 14 '17 at 13:19

3

In the interests of helping anyone who lands here but was actually looking for a jQuery free way of doing this:

element.classList.contains('your-class-name')

answered Feb 14 '17 at 13:19

Derek Ekins

11,215
6
61
71

score 0 · Answer 6 · answered Nov 21 '13 at 10:15

0

Check the official jQuery FAQ page :

How do I test whether an element has perticular class or not

answered Nov 21 '13 at 10:15

Kedar.Aitawdekar

2,364
1
23
25

score 0 · Answer 7 · answered Dec 11 '15 at 13:50

0

 $('.segment-name').click(function () {
    if($(this).hasClass('segment-a')){
        //class exist
    }
});

answered Dec 11 '15 at 13:50

vineet

13,832
10
56
76

score 0 · Answer 8 · answered Jul 27 '16 at 23:41

In my case , I used the 'is' a jQuery function, I had a HTML element with different css classes added , I was looking for a specific class in the middle of these , so I used the "is" a good alternative to check a class dynamically added to an html element , which already has other css classes, it is another good alternative.

simple example :

 <!--element html-->
 <nav class="cbp-spmenu cbp-spmenu-horizontal cbp-spmenu-bottom cbp-spmenu-open" id="menu">somethings here... </nav>

 <!--jQuery "is"-->
 $('#menu').is('.cbp-spmenu-open');

advanced example :

 <!--element html-->
    <nav class="cbp-spmenu cbp-spmenu-horizontal cbp-spmenu-bottom cbp-spmenu-open" id="menu">somethings here... </nav>

   <!--jQuery "is"-->
    if($('#menu').is('.cbp-spmenu-bottom.cbp-spmenu-open')){
       $("#menu").show();
    }

Determine if an element has a CSS class with jQuery

8 Answers8

Linked

Related