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.

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.

• javascript
• jquery
• html
• jquery-selectors

• 1 Number 1 should be $('button.btn-x')... - you don't need to use the attribute contains selector to select a class. – nnnnnn Commented Nov 26, 2012 at 10:48
• 1 you should use on though, because live is deprecated. – Deep Frozen Commented Nov 26, 2012 at 10:49
• Second one should be faster. Check this stackoverflow question. – Sang Suantak Commented Nov 26, 2012 at 10:49
• Why would you have 500 buttons? Who would click them? – Bennor McCarthy Commented Nov 26, 2012 at 10:50
• @Bennor well, this is not the question :) – Vural Commented Nov 26, 2012 at 10:52

5 Answers 5

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() { });

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.

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, remended
$('#staticParent').on('click', '.btn-x', function() { }); 

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

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().

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 patibility with IE)

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