Performance of jQuery selectors

Question

HTML markup:

<div>

 <a id="foo"> </a>

</div>

jQuery:

$('div').each(function(){

 $('#foo', this).dosmth(); // 1
 $('#foo').dosmth();       // 2

});

Which method would be faster to run dosmth?

Answer 1

Since we're getting a variety of answers, hopefully here's some clarity (check the examples here):

1. The fastest - There's no need to loop. Skip the $("div").each part and just do $("#foo"). foo is an ID, and thus lookup is instantaneous.
2. Middling - $("#foo") in a loop. Note that you also don't want this because it will execute the function for every div on the page (and for this reason on a larger document with a lot of divs this would be the slowest).
3. Slowest - $("#foo", this). The context node doesn't help in the first place, and then consider that jQuery will first build a jQuery object out of this and turn it into $(this).find("#foo"). That's all unnecessary, of course.

Bottom line: in most cases (e.g. sometimes when confirming that an ID is in one context and not another) context nodes are unnecessary with ID lookup.

Here are some resources from the jQuery source:

• Handling for most of the cases here - note that $("#id") is singled out for handling as document.getElementById
• find - what happens when you pass a context