jQuery .hasClass() vs .is()

Question

is there a preferred method of determining whether an element is assigned a class, from a performance standpoint?

$('#foo').hasClass('bar');

or

$('#foo').is('.bar');

Answer 1

Update:

I committed a test following a comment and four upvotes to very comment. It turns out that what I had said is the correct answer. Here is the result:

http://jsperf.com/hasclass-vs-is-so

---

The is is multi-purpose, you can for example do is('.class'), is(':checked'), etc which means is has more to do where is hasClass is limited which only checks for a class being set or not.

Hence, hasClass should be faster if performance at any level is your priority.

Answer 2

Since is is more generic than hasClass and uses filter to process the provided expression, it seems likely that hasClass is faster.

I ran the following code from the Firebug console:

function usingIs() {
for (var i=0; i<10000;i++) {
 $('div#example-0').is('.test');
}
}

function usingHas(){
for (var i=0; i<10000;i++) {
 $('div#example-0').hasClass('test');
}
}

usingIs();
usingHas();

I got:

• usingIs: 3191.663ms
• usingHas: 2362.523ms

Not a huge difference, but may be relevant if you're doing lots of testing.

EDIT when I say 'not a huge difference, my point is that you need to do 10000 cycles in order to see 0.8s of a difference. I'd be surprised to see a web application such that switching from is to hasClass would see a significant improvement in over all performance. However, I grant that this is a 35% improvement in speed.

Answer 3

Both should be pretty close in terms of performance but $('#foo').hasClass('bar'); seems more readable and semantically correct to me.

Answer 4

.hasClass is much faster than .is You can test it from here. Change the test case according to you.