A semantically “right” way to select multiple elements in jQuery?

Question

I often use classes as a means to identify a related set of elements, for example:

 <input value="10" class="sum-this" /> <input value="20" class="sum-this" /> <input value="30" class="sum-this" /> 

The sum-this class does not have CSS and is not defined in any CSS files - it is just used in some jQuery - for example:

 var total = 0; $(".sum-this").each(function(i, el){ total += parseInt($(el).val()); }); console.log(total); // 60? 

Is there a proper way to do this? Should I use a different attribute? rel or data-* ?

Answer 1

As @Pointy and @JustinPowell noted in the comments, this is perfectly acceptable. In fact, it is also clearly stated in the W3C HTML4 specification that the use of class attributes for purposes other than style choices is fully acceptable. I quote:

The class attribute, on the other hand, assigns one or more class names to an element; we can say that the element belongs to these classes. A class name can be used by multiple instances of elements. The class attribute has several roles in HTML:

• As a style sheet selector (when the author wants to assign style information to a set of elements).
• For general-purpose processing by user agents.

However, HTML5 also added custom data-* attributes (where * is a custom string) for this purpose.

---

LINK

• Blog post discussing your question
• W3C HTML4 Attributes
• W3C HTML 5 data attribute

Answer 2

As stated in the comments, it is great to use classes only in JavaScript. But here is the suggestion: when my colleagues want to use the class only for this purpose, they prefix it with 'js-' to distinguish the classes used for styling from the classes created for JS.

Answer 3

As long as your code is syntactically correct using classes, and there is nothing wrong with that, since you are looking for something semantically correct, I would recommend data attributes . Classes are really designed to be styled, while data attributes were created "with regard to extensibility for data that should be associated with a specific element but should not have any specific meaning."

You can write your HTML as:

 <input value="10" data-item="sum-this" /> <input value="20" data-item="sum-this" /> <input value="30" data-item="sum-this" /> 

And your jQuery like:

 var total = 0; $('input[data-item="sum-this"]').each(function(i, el){ total += parseInt($(el).val()); }); console.log(total); 

Answer 4

Optimizing the jQuery selector is less important than before, as more browsers implement getElementsByClassName, querySelector, and querySelectorAll that parse CSS syntax.

Thus, the burden of choice shifts from jQuery to the browser, and now jQuery supports most CSS3 selectors, as well as some non-standard selectors, and you can select the selector you want to work with.

However, there are a few more tips to consider:

• Use ID if possible
• Avoid Class Picks
• Avoid overly complex selectors
• Increasing specificity from left to right
• Avoid repeating selector

Answer 5

Like everyone else, it is fully consistent with the elements of the javascript-only class.

In the example you give, an alternative to collecting these elements:

 <input value="10" class="sum-this" /> <input value="20" class="sum-this" /> <input value="30" class="sum-this" /> 

with:

document.querySelectorAll('.sum-this'); (or $('.sum-this') in jQuery)

can collect these elements:

 <input value="10" /> <input value="20" /> <input value="30" /> 

with:

document.querySelectorAll('input[value]');