Tips for writing a jQuery selector

Question

Seems to me the most important yet tricky thing to get right when writing jQuery is the selector.

What tips do you have for writing an accurate selector?

Answer 1

Make it easy to write selectors by using class decorators to identify similar elements.

 <div class="clickable">.....</div>
 <a class="clickable">...</a>
 <span class="clickable">...</span>

 $('.clickable').click( function() { some common click action } );

Answer 2

here's my tip...

keep this in your bookmarks:

http://www.learningjquery.com/2006/11/how-to-get-anything-you-want-part-1

Answer 3

Study the manual.

Answer 4

Keep in mind the CSS Specificity, so you don't select to much or to few elements.

Answer 5

Performance test your selectors

Yea, everything's hunky dory for me on my 8 Cores of goodness in Chrome. But then I pretend I'm a client and visiting on a 900 mHz IE6 machine (don't laugh, I keep one of these next to me to test this stuff) and suddenly I can get lunch in the time it takes my selector to return.

I changed some code from this: $('.class, .class2, .class3').show()

To something like this: array.push($(this)) ... $(array).show() And sped it up 100x

Answer 6

While class and id are the easiest to plan around, I've found I focus more and more on attribute selectors and jQuery's pseudo-pseudoclasses. Two in particular that have been indispensable lately are :has() and :not(). Attribute selectors are also really handy if you know how to use them, though they're fairly limited in what they can do. One improvement that I'd love to see in the selector engine is a negation of :has(), and a negation of [attribute].

Answer 7

Not a direct answer to your question, but with respect to performance the selector is the 2nd most important thing to get right.

The most important thing is the context parameter to $(). If not supplied, jQuery defaults it to document. This means you are traversing the entire DOM tree. With a context specified, jQuery traverses only underneath it:

$('whatever'); // scans the entire `document`
$('whatever', element); // scans only within element

Answer 8

I've used SelectorGadget. It works fairly well provided the HTML isn't too complex.

Answer 9

As with anything else, understand how the library works before using it.

Answer 10

Take a look at John Resig’s presentations about jQuery, especially the ones that deal with its performance.

The essentials are that jQuery processes the selector from right to left and not from left to right. So the selector foo bar will select all bar elements and filter the ones that have a foo element as an ancestor instead of first selecting all foo elements and then selecting all bar elements for each of that foo elements. That technique avoids expensive merging.

So your last sub-selector should be the most expressive while the others can be less expressive.