Question

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 question is: Are these really the 2 alternatives left? And what is the most efficient solution?

Thanks

Answer 1

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.