javascript - 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"]')?

question from:https://stackoverflow.com/questions/17569766/difference-between-tabs-a-and-tabs-finda

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.