Which way is efficient?

Question

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.

Number 1 should be `$('button.btn-x')...` - you don't need to use the attribute contains selector to select a class. — nnnnnn, Nov 26 '12 at 10:48
Second one should be faster. Check [this stackoverflow question](http://stackoverflow.com/questions/1668219/jquery-elementattribute-something-vs-element-class-performance). — Sang Suantak, Nov 26 '12 at 10:49

score 9 · Accepted Answer · answered Nov 26 '12 at 10:48

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

score 4 · Answer 2 · answered Nov 26 '12 at 10:49

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.

Lol true that, I didn't even read the first selector until now — Esailija, Nov 26 '12 at 10:50

score 2 · Answer 3 · answered Nov 26 '12 at 11:37

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

score 1 · Answer 4 · edited Nov 26 '12 at 10:57

1

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

edited Nov 26 '12 at 10:57

Talha

18,898
8
49
66

answered Nov 26 '12 at 10:53

Maxim Pechenin

344
1
13

live(), like delegate(), register only one event handler. The different between them is that live uses the root document element and delegate let you choose where it is anchored. – Naor Nov 27 '12 at 06:51

score 0 · Answer 5 · edited May 23 '17 at 11:53

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.

In last versions of jQuery (1.7+) $('.classname') works with using getElementsByClassName, so this is almost the same. — Maxim Pechenin, Nov 26 '12 at 11:00
No. It is one-time search for all elements with this class. Even if there are 500 elements. — Maxim Pechenin, Nov 27 '12 at 06:32

Which way is efficient?

5 Answers5