jQuery .hasClass() vs .is()

Jquery

Jquery Problem Overview


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

Jquery Solutions


Solution 1 - Jquery

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:

enter image description here

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.

Solution 2 - Jquery

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.

Solution 3 - Jquery

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

Solution 4 - Jquery

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

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionOmer BokhariView Question on Stackoverflow
Solution 1 - JquerySarfrazView Answer on Stackoverflow
Solution 2 - JqueryDancrumbView Answer on Stackoverflow
Solution 3 - JqueryDarin DimitrovView Answer on Stackoverflow
Solution 4 - JqueryGauravView Answer on Stackoverflow