Tips to reference DOM Elements working with jQuery

Question

Need some Advice on how to reference elements with jQuery (DOM/Traversing/Selectors). Sometimes its just enough to set an id at the desired element and do this:

$('#elementID').hide();

But sometimes it just cant be used, for example when working with list of n elements, i have seen some people attach a class to each element of the list like:

<a class="selectMe" href="http://jquery.com/"&gt;jQuery1&lt;/a&gt;
<a class="selectMe" href="http://jquery.com/"&gt;jQuery2&lt;/a&gt;
<a class="selectMe" href="http://jquery.com/"&gt;jQuery2&lt;/a&gt;

And then do this with jQuery:

$('.selectMe').hide();

Some other do the same but with rel attribute and so on..

Some other people do this so generic that is scary, if this is the scenario:

<div id="MyID">
<span>Some Text Here</span><a href="http://jquery.com/"&gt;jQuery1&lt;/a&gt;
</div>

If i Want to attach an event to the anchor:

$('#MyID a').show();

Like assuming that there will be just 1 link inside that DIV.

What you guys think it really depends totally on the scenario or there are some good practices to do this.

Answer 1

Look for the fastest constructs. ID is fastest. Get the smallest context fast - you can even use an ID on a DIV, then select from there - avoid full DOM search when possible.

For instance, it will be faster to search on an element with a class than just a class.

Some of this is NOT intuitive. Look at some of the examples in StackOverflow to get a feel for what works.

For instance:

<div id='mydiv'>
<a class="selectMe" href="http://jquery.com/"&gt;jQuery1&lt;/a&gt;
<a class="selectMe" href="http://jquery.com/"&gt;jQuery2&lt;/a&gt;
<a class="selectMe" href="http://jquery.com/"&gt;jQuery2&lt;/a&gt;
</div>

then do the select: (Edited per notes)

$('#mydiv').children('a.selectMe').hide();

This then only searches within that context for the links.

Edit per notes:

There are some preferences for the selection syntax such as:

 $('#mydiv').children('a.selectMe').hide();
 $('#mydiv > a.selectMe').hide();

Some research on my part needed as the documentation for jQuery is a bit ambiguous here: " parent > child Returns: Array Matches all child elements specified by "child" of elements specified by "parent". " and " children( expr ) Returns: jQuery Get a set of elements containing all of the unique immediate children of each of the matched set of elements. "

The question that needs to be clarified in MY mind is whether the first form returns ALL children/grandchildren or just the immediate children as the second form indicates is true. One of these is the "selector" form and the other under "traversing", which to me are similar functional tasks but not exactly the same thing.

Answer 2

I would say it depends on the situation but like Mark Schultheiss said, it helps to understand how jQuery executes your selectors to get the elements.

Selecting by className without giving any context is going to be slow in IE since it doesn't support getElementsByClassName. See this article http://ejohn.org/blog/getelementsbyclassname-speed-comparison/. It helps to prepend with the element name (such as div.className) or limiting the search to a smaller scope like this - $('.class', '#myDiv')

Same goes with attribute selectors. rel attribute abuse is worse than class attribute abuse since there isn't a native search-by-attributes function in any browser.

Answer 3

This is a very good read: jQuery Selectors - How to get anything you want