JQuery class selector vs id selector

Question

I have 7 different buttons that all perform the same javascript function on click. should i use class selector or id selector.

$("input.printing").on("click", function(event) {
     printPdf(event);
});

or

   $("#package1Pdf").click(function(event) {
         printPdf(event);
   });
$("#package2Pdf").click(function(event) {
         printPdf(event);
   });
$("#package3Pdf").click(function(event) {
         printPdf(event);
   });
$("#package4Pdf").click(function(event) {
         printPdf(event);
   });

What are the advantage and disadvantage of each? Which is more preferred.

Phillida

Look at the code and tell us, honestly, which looks nicer to you. There are no right or wrong answers, this is just a personal question posed to you to get your own opinion on this. – Tristatristam

If you wanted, you could also do $("#package1Pdf, #package2Pdf, #package3Pdf, #package4Pdf").click() – Countertype

Its faster to select the element by id, but the code is neater when you just bind the function once by class. In general I would go with code readability unless you really need that (most likely slight) performance boost. – Mislike

answering your question really depends on what your concern is. are you concerned about performance, execution, readability, scalability, maintainability? – Washedout

Initially, this was copy/pasted but I feel it's def worth looking at: #1231136 – Countertype

@Countertype That answer was posted on Aug 5 '09 and it clearly need revision with current browser standards. – Ornis

Answer 1

You can use an ID filter without multiple selectors:

$('[id^="package"]').click(printPdf);

The above will select all id's starting with "package". This means the difference is mostly semantic. You should choose that which is most meaningful to your application and the way it was developed.

See the jQuery attribute selectors page to learn about the flexibility of jQuery selection. Keeping a bookmark on this page will prevent you from ever having to write code like your second example again.

Which is better?

If you have your structure set up so that you have a class that logically and correctly defines the appropriate set of elements, then that is what you should use to select on.

Likewise, if you have instead given elements specially named IDs and do not have a descriptive class name attached that represents what you want to select, then use the ID selection. The performance difference will be of no concern to almost any application, yours included.

Gothic

Answer 2

Obviously your first code using class is much cleaner, neater and better.

ID selector are the fastest, which is true.. but at this time and age, it doesn't really matter.

So don't get bothered so much with performance(unless it is a concern) and just use the one that is clean and maintainable.

oh btw, you don't even need that anonymous function. See below,

$("input.printing").on("click", printPdf);

Ornis

Answer 3

as we all know id selector is faster and better .. but in you case.. since you are selecting each id 8 times.. which compare to the class seletor is slower as you can see here

class selector in your case is better, faster, and more readable...

note: what if you have to add 20 more buttons in the near future (100 would be too much).....and you choose to go with id selector... phewwww!!! that is like, 20 more event handler...... ;) ;)

Cribwork

Answer 4

As most have stated, the selector you use can have an effect on performance, but it is often negligible, and more a matter of style and readability. Bottom line, jQuery will create a unique handler for every element that is selected, either individually by id or using a multi-select method like a class or attribute selector. Personally, I like your first example, as it will cover future additions to your view without need to remember to add another handler.

Washedout

Answer 5

Selecting just by Id is faster than selecting by class in general since jQuery under the hood uses getElementById which is faster in most browsers. Please refer to this article for more information as it shows many other ways to improve performance related to Jquery. However, please remember selector performance is not the only thing that you have to be concerned about. Attaching to many unnecessary event could also create performance issue. To mitigate around this problem you could use delegate please see this jQuery documentation for more information regarding delegate.

Beggar