CODEWITHSUNDEEP
javascriptjqueryhtmljquery-selectors
Vural
Vural

Reputation: 8748

Which way is efficient?

I have over 500 buttons on the page. 

<button class="btn-x">test</button>

jQuery:

// #1
$('button[class*="btn-x"]').live('click', function() { }});

// #2
$('.btn-x').live('click', function() { }});

Which call is efficient now, calling directly by class or button[attr*], I want to know it, because it can cause problem later when I have more then 500 buttons but I am not sure if they affect the same result.

Upvotes: 4

Views: 186

Answers (5)

Corneliu
Corneliu

Reputation: 2942

The most efficient is to have one event handler instead of 500.

As @Rory McCrossan said is better to attach the event handler to a static parent:

// one event handler, recommended
$('#staticParent').on('click', '.btn-x', function() { }); 

// 500 event handlers, not recommended
$("button.btn-x").on("click", function() { ... });

Upvotes: 2

Maxim Pechenin
Maxim Pechenin

Reputation: 344

Class selector is faster. Class selector is only slower than id selector. And you should use .delegate() or .on() for jQuery 1.7 and later) instead of .live(). In your case it's important, because .delegate() attach one handler instead of 500 for .live().

Upvotes: 1

Naor
Naor

Reputation: 24063

If you are looking the most efficient code you might do:

document.getElementsByClassName("btn-x");

But I think this is not working in IE. If you are looking for a solution suitable for IE also, you might do:

function getElementsByClassName(className) {
    var a = [];
    if (document.getElementsByClassName) {
        a = document.getElementsByClassName(className);
    } else {
        var node = document.body;
        var re = new RegExp('(^| )'+classname+'( |$)');
        var els = node.getElementsByTagName("*");
        for(var i=0,j=els.length; i<j; i++) {
            if(re.test(els[i].className)) { a.push(els[i]); }
        }
    }
    return a;
}

(the last taken from javascript document.getElementsByClassName compatibility with IE)

I didn't test it but this should be more efficient then using jQuery.

Upvotes: 0

BoltClock
BoltClock

Reputation: 723498

If you have a class attribute, it only makes sense to use a class selector over an attribute selector. Efficiency is provided as a secondary bonus; both jQuery and browser native implementations have special optimizations for class selectors because of their associated semantics and usage.

Besides, that's not an entirely correct way of handling class attributes using attribute selectors. You probably mean [class~="btn-x"] and not [class*="btn-x"]. Each of these matches attribute values in a different way, with the former behaving more closely to a selector for the class attribute.

Upvotes: 4

Rory McCrossan
Rory McCrossan

Reputation: 337560

The class selector will be an order of magnitude quicker.

That being said, live() is deprecated. You should be using delegate() or if you are using jQuery 1.7+ on()`.

For example:

// < jQ 1.7
$('#staticParent').delegate('.btn-x', 'click', function() { });

// jQ 1.7+
$('#staticParent').on('click', '.btn-x', function() { });

Upvotes: 9

Related Questions