2

I'm wondering which approach is better and why: A) One document on click with many selectors, B) multiple document on clicks.

Also is there a limit on selectors for A? Thanks.

A)

$(document).on('click', '#a, #b, #c, #d, #e', function(e){

});

vs

B)

$(document).on('click', '#a', function(e){

});


$(document).on('click', '#b', function(e){

});

$(document).on('click', '#c', function(e){

});

$(document).on('click', '#d', function(e){

});

$(document).on('click', '#e', function(e){

});
ialphan
  • 1,241
  • 1
  • 17
  • 30

3 Answers3

2

Certainly the first approach as it promotes the greatest code reuse (since you needn't repeat the body of the function for each selector) and is therefore the simplest to maintain.

As a rule of thumb, you should only break your code out into separate functions when the function body will be different.

There is no realistic limitation on the number of selectors that you may use, so that shouldn't be a consideration.

Of course, a better choice would be to apply a single class and base your selector on that class:

$(function() {
    $(".myClass").on('click', function() {
        //do something
    });
});​

The best choice, would be to apply a single class, limited by a context (due to the inefficiency of selecting on only a class):

 $(function() {
    $(".link", "#context").on('click', function() {
        //do something
    });
});​
coderabbi
  • 2,261
  • 16
  • 18
  • I'm all in favor of reusability but what happens when selector is 15 different ids? Is it still good? Or when is it a good idea to break it to multiple on.clicks. – ialphan Oct 18 '12 at 03:08
  • When they all execute the same set of code, still use the one. You really only need to break it when they start becoming really specialised functions. – quentinxs Oct 18 '12 at 03:11
2

Option A is called multiple selector approach http://api.jquery.com/multiple-selector/ - Selects the combined results of all the specified selectors

You can specify any number of selectors to combine into a single result. This multiple expression combinator is an efficient way to select disparate elements. The order of the DOM elements in the returned jQuery object may not be identical, as they will be in document order. An alternative to this combinator is the .add() method.

Performance (Selectors) = id vs class vs tag vs pseudo vs. attribute selectors ==> http://jsperf.com/id-vs-class-vs-tag-selectors/2

Advantages I see with multiple selector:

Recommendation

Please think of using class attribute instead of so many id's if all of them does same thing

Like this

$(function() {
    $(".classname").click(function() {

    });
});​
Tats_innit
  • 33,991
  • 10
  • 71
  • 77
  • They don't do the same thing. id's are faster than class, aren't they? – ialphan Oct 18 '12 at 03:27
  • Hiya @ialphan `:)` cool if you dont do same thing then think of putting common functionality in one function and call it from different click event, for the other question look in here for the ID vs Class answer - http://stackoverflow.com/questions/5029254/is-id-selector-faster-than-class-selector-when-it-is-cached-in-jquery – Tats_innit Oct 18 '12 at 03:30
  • Cool @ialphan take a look into the updated performance check link in my post for: id vs class vs tag vs pseudo vs. attribute selectors ; hope it helps you `:)` – Tats_innit Oct 18 '12 at 03:33
  • How do you target each selector inside of on click? Something like this: if($(this).attr('id') == 'a'){ /* do stuff */ } – ialphan Oct 18 '12 at 14:36
  • Ahoy @ialphan `:)` you could attach click event separately if every click has separate functionality, also you can try submitting code in stack-code review if you further need code review, *also* what you are trying to do is correct, but you might end up with many `if else` condition which personally I don't like, you can also look for `switch` hope it helps bruv, `:)` – Tats_innit Oct 18 '12 at 20:07
0

I agree with your A method,

why you not to use jquery selector? if you have a same function for each item, you can use jquery selector and give a same class name in each item and the code should be like this:

<script>
    $(document).ready(function(){
         $(".item").click(function(){
            #your code here...
})
})
</script>

other way, you can make some function and you just send a parameter to your function, so your code more less and efficient. Did i wrong?

fenz kurol
  • 113
  • 1
  • 10