Difference between $('#tabs a') and $('#tabs').find('a')

Question

I have following structure

<ul id="tabs" class="nav nav-tabs">     <li><a href="#aaa" hashval="aaa">AAA</a></li>     <li><a href="#bbb" hashval="bbb">BBB</a></li>     <li><a href="#ccc" hashval="ccc">CCC</a></li>     <li><a href="#ddd" hashval="ddd">DDD</a></li> </ul> 

Now I am operating on the anchor tag by following code and which is working fine.

$('#tabs a[href="#ddd"]').tab('show'); 

I am using pycharm which adds warning for the line by saying "Preface with ID selector". When I click it, pycharm changes to following

$('#tabs').find('a[href="#ddd"]').tab('show'); 

Both are working fine but I don't understand the difference.

What is the difference in both or more specifically what is difference between $('#tabs a[href="#ddd"]') and $('#tabs').find('a[href="#ddd"]')?

Answer 1

$("#tabs a") evaluates from right to left - which is the native direction of both Sizzle selector engine and querySelectorAll - i.e. first it finds all of the anchor elements in the page and then narrows it down to those under #tabs.

$("#tabs").find("a") evaluates - more intuitively - from left to right, i.e. first it finds #tabs, and then only the anchor elements under it.

Clearly the latter would yield better performance, but it would only be noticeable accumulatively; that is, if you run thousands of queries. Otherwise, the difference is negligible.

Answer 2

As stated in "Increase Specificity from Left to Right":

A little knowledge of jQuery’s selector engine is useful. It works from the last selector first so, in older browsers, a query such as:

$("p#intro em"); 

loads every em element into an array. It then works up the parents of each node and rejects those where p#intro cannot be found. The query will be particularly inefficient if you have hundreds of em tags on the page.

Depending on your document, the query can be optimized by retrieving the best-qualified selector first. It can then be used as a starting point for child selectors, e.g.

$("em", $("p#intro")); // or $("p#intro").find("em"); 

But Test case says $("#tabs > a") would be fastest