Is it better to use class selectors or custom attribute selectors with jquery?

I have read that it is better to select using "id" than "class" with jquery. However, say i have several divs on a page that i need to select with jquery and perform the same manipulation. I cannot select with the "id" attribute because it would nolonger be unique. eg:

<div id="selectMeOnClick">
    ...
</div>
<div id="selectMeOnClick">
    ...
</div>
... many more divs ...

which leaves me (i think?) with 2 alternatives:

Use class selectors

<div class="selectMeOnClick">
    ...
</div>

Use custom attribute selectors

<div data-select="selectMeOnClick">
    ...
</div>

My quest开发者_StackOverflowion is: Are these really the 2 alternatives left? And what is the most efficient solution?

Thanks

I would use class selectors. Using custom attribute selectors would be:

1. Invalid HTML. HTML only permits certain named attributes to be present on certain types of elements.
2. Slower. While jQuery can use native .getElementsByClassName in your first snippet, it can't for the second. This could lead to a slowdown in modern browsers.

Yes, it is better to use "id" than "class" with jquery. But not only with jquery. This is general approach.

In your situation you have to provide more information. If you want to select several divs with same class - may be all of them are child of other div, e.t.c. And you can get them as a child of some div which you can get by id.

You have to create such DOM structure that you can access to elements by id or logically by some properties.

Also, if you want to change some css attribute in exact css-class, it is not the worst idea to get div's by class.

Also custom attribute selections not good way. It is not valid.

The ID is the fastest in JavaScript. Because there is only one element for sure (if your code is valid). The class and the custom attr are going to be the same speed I think.

I don't like using custom attributes because it's not valid and it makes the DOM pretty messy. I prefer using .data() to store data that are relative to the selected element.

I personally use both depending on the occasion. If for example a row in the table represents some data that I want to have laying around but not necessairly display I use custom attributes. Sometimes it's just so nice to write stufflike this:

$("input[action=do-something]").click(function() { ... });

and not be forced to mess around with element classes. I realize it is a bit slower but taking into account that it happens only once after the page is loaded I can live with that.

For a simple selection like this performance wont be a problem. but if your div's are within a container with a Id, for example

<div id="Main">
    <div class="selectMeOnClick">
        ...
    </div>
    <div class="selectMeOnClick">
        ...
    </div>
</div>

Update: according to gdoron comment

Then the fastest selector would be $('#Main selectMeonClick')