jQuery .hasClass() vs .is()
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');
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.
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.
Both should be pretty close in terms of performance but $('#foo').hasClass('bar');
seems more readable and semantically correct to me.
.hasClass
is much faster than .is
You can test it from here. Change the test case according to you.
精彩评论