7

I often need to select multiple elements at once with jquery... to do this I usually just add a class to all the elements I'd like to select and then use jquery to select by class.

Is this a bad practice or should I use something like the html 5 data attribute instead?

mipe34
  • 5,596
  • 3
  • 26
  • 38
RayLoveless
  • 19,880
  • 21
  • 76
  • 94
  • If they all relate to a particular grouping of objects, however that is defined, then I don't see why using a class would be "bad practice", even if there was no corresponding stylesheet selector. Of course, it is a slippery slope: is it *determining a grouping* or *attaching data*? –  Sep 05 '12 at 17:29
  • 1
    (Selecting - over a larger DOM space - based on classes is likely faster, fsvo faster, than selecting on [other] node attributes. Of course "caching" the initial jQuery object might entirely mitigate any performance concerns.) –  Sep 05 '12 at 17:31

4 Answers4

6

I would say it's okay for a general reference where no arguments need to be passed.

i.e. All .flashing elements will have a flash effect applied to it. The end.

It gets out of hand when you start using multiple classes or "data classes", like class="flashing-15times onhoveronly", etc...

Once you need to start passing arguments or variables, you should move towards data attributes or other OOP methods.

Steve Robbins
  • 13,672
  • 12
  • 76
  • 124
3

It's excellent practice. It's what the class attribute is for. Always remember that the class attribute is part of the semantic layering of HTML, for flagging groups of objects with a common property, and not a part of CSS. It's the CSS selectors that provide the binding between the semantics of HTML and the presentation of CSS. And flagging groups of objects with a common property is exactly what you are doing.

Just make sure that you use a meaningful name for the collection of objects you want to gather together to apply your jquery action to.

Alohci
  • 78,296
  • 16
  • 112
  • 156
2

This used to be the standard way to do it. However, the currently standard way to do it, is using data- attributes. For example, if you want to make a plugin that makes a certain element have a tooltip, you could do

<div data-tooltip="This is a div"></div>

You can select elements with a data- attribute using the jquery hass attribute selector.

$("[data-tooltip]").each(function(){
    generate_tooltip($(this));
});
bigblind
  • 12,539
  • 14
  • 68
  • 123
2

I think that w3 spec is helpful here:

http://www.w3.org/TR/2011/WD-html5-20110525/elements.html#embedding-custom-non-visible-data-with-the-data-attributes

The money quote:

Custom data attributes are intended to store custom data private to the page or application, for which there are no more appropriate attributes or elements.

It then goes on to use the example of a music site that uses data- to contain the length of music tracks, for sorting.

It would seem that data- are to be reserved for these types of uses vs classes/ids which are intended as selectors.

Here's another helpful article to think about the subject: http://danwebb.net/2010/1/27/put-that-data-attribute-away-son-you-might-hurt-someone

steve-er-rino
  • 385
  • 1
  • 3
  • 13
  • This seems the most correct to me. Makes sense that classes/ids should be used for selecting/styling and that data attribute is used for just that...data. – RayLoveless Sep 05 '12 at 21:01
  • This answers data attributes vs id/class, but not id vs class. Some people say that you should use id's to select with javascript and classes for css. It's becoming more common practice to avoid using ID's in css. It's a bit slower to select with classes in JavaScript, but in IMO it makes sense from time to time. This article makes that case: http://statichtml.com/2009/classes-are-not-just-for-css.html – tkane2000 Mar 19 '13 at 02:41