$('#id tag') vs. $('#id').find('tag') - which is preferable?

Question

I want to know which option is better, particularly in terms of their speed:

$(\'#id tag\')...

or

$(\'#id\').find(\'tag\')         


        

Answer 1

Performance measure here: :)==> http://jsperf.com/find-vs-descendant-selector

Seems like descendant way is lil faster but perform poorly in opera,

anyhoo in my opinion it doesn't matter :)

Hope this answers your question and see here Is .find() faster than basic descendant selecting method?

Answer 2

Descendant performs better. check for this link Jsperf .

1. if you have too many nested element. then go for find. it's really a small amount of difference.
2. it's just your convienent way of coding. i prefer if too many nested items are there, then i will go for find,

Answer 3

You can base your decision on 3 things:

Readability

This is not much of a difference with your two given selectors. For my part, I prefer the $('#id').find('inner') syntax because it describes more accurately what it is actually doing.

Reusability

If you have other parts of your code use the same id selector (or something in its context), you can cache the selector and reuse it. I myself find it harder to refactor code that has been written like this $('#id inner'), because you have to decode the css selector first before you can move on and find possible improvements.

Imagine these two cases with not much complexity

$('#hello .class_name tag').doThis();
$('#hello .other_name input').doThat();

And the other case

$('#hello').find('.class_name tag').doThis();
$('#hello').find('.other_name input').doThat();

I think the second example screams at you «Cache the id selector», and the first does not.

Speed

Performance is always a good point, and in this case, the id selector with the find does the better job in most browsers, because it establishes the context first and can apply the descending selector to a smaller subset of elements.

Here's a good performance test, if you want to know more about context-vs subset selectors performance in jQuery. Subsets of ids generally rule. Of course you can get different results, but in most cases, they do.

So, 3 to 0 for subset selectors from my point of view.

Answer 4

It would appear that the first one $("#id tag") is much slower than the second ($("#id").find("tag")) on modern browsers; test here, see screenshot below. IE7 (which lacks querySelectorAll) runs them at roughly the same speed.

But two observations:

1. It's extremely unlikely to actually matter. If you aren't debugging an actual, known performance problem, don't worry about it.

2. Synthetic benchmarks are always suspect. If you're fighting an actual, known performance problem, profile that (your actual selector and your actual markup).

Answer 5

as ive said - its different in browsers.

chrome :

http://i.stack.imgur.com/SijQY.jpg

ie

http://i.stack.imgur.com/axhGw.jpg

Answer 6

Here's the test case HTML where I look for all span elements under #i element:

<div id="i">
  <span>testL1_1</span>
  <span>testL1_2</span>
  <div>
    <span>testL2_1</span>
  </div>
  <ul>
    <li>
      <span>testL3_1</span>
    </li>
  </ul>
  <div>
    <div>
      <div>
        <div>
          <span>testL5_1</span>
        </div>
      </div>
    </div>
  </div>
</div>

Testing these three jQuery selectors:

$("#i span");         // much slower
$("#i").find("span"); // FASTEST
$("span", "#i");      // second fastest

http://jsperf.com/jquery-sub-element-selection

I've run it on Google Chrome and Firefox and it seems that .find() is the fastest closely followed by the third case and much slower first one.