$（'＃tabs a'）和$（'＃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 - ie 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 , ie 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, eg

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

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

Answer 3

The second one is MUCH quicker. The reason being jQuery's selector enginge Sizzle , which traverses the selection from right to left , not vice versa.

This means that the selector

$('#tabs a[href="#ddd"]')

First queries the DOM document for a tag, which contains the attribute href set to #ddd . It then filteres out all of them, to get every one that is a <a> tag. At last, it traverses up the DOM tree for every node, trying to find a parent #tabs .

Imagine a site with 1.000 tags with href="#ddd" , how tremendously slow that would be.

THEN.

The other variation pycharm suggest, is to first locate a element #tabs . This is super-quick, since jQuery can utilize the native browser method getElementById() . Having this node, it can traverse down to find all tags that are matching. By doing this, not all tags in the whole DOM-tree , needs to be checked. Only those which actually are in #tabs .

For further information, please check out this page in the documentation .

Answer 4

The effect is the same: Find anchors that have the value #ddd as href and are a descendant of #tabs . The difference lies in the way to achieve this.

The first solution finds the anchors and then checks if they are a descendant of #tabs .

The second solution finds #tabs and then finds the anchors. Which should be faster, of course.

Answer 5

.find() is better performance wise as compared to your first selector

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

, that is why pycharm changes it to the selector using .find()

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

http://vaughnroyko.com/the-real-scoop-on-jquery-find-performance/

Answer 6

The difference is that find() allows you to filter on a set of elements based on a selection you've already made, returning and array of elements if that's the case.

$('#tabs').find('a[href=“#ddd”]');

And it's a more specific way of searching for an element because you are saying "hey, go to #tabs and find me all a[href=“#ddd”] in there" instead of you saying "hey, find me all this guys $('#tabs a[href=“#ddd”]') in all the code that i have."

Answer 7

While, in most cases, the performance is the only difference, the difference in approach can also affect the outcome of your code, depending on what selectors you are using.

For example, $("table").find("tr:even").addClass("even"); will add the "even" class to the every other row in each individual table that gets returned. So, if the "even" class makes the text in the rows bold and you have two tables, each with 3 rows, you would get the following result:

---

this is table one, row 1

this is table one, row 2

this is table one, row 3

---

this is table two, row 1

this is table two, row 2

this is table two, row 3

---

In both cases, the 1st and 3rd row of each table (ie, the "even" rows . . . don't get me started on JQuery's even filter, selecting the odd rows . . .) are bolded.

On the other hand, $("table tr:even").addClass("even"); will add the "even" class to every other row in the entire group of rows from all tables combined.

---

this is table one, row 1

this is table one, row 2

this is table one, row 3

---

this is table two, row 1

this is table two, row 2

this is table two, row 3

---

In this situation, the the 1st and 3rd row of second table are actually the 4th and 6th rows of the entire group of <tr> elements, so they are treated as "odd". The 2nd row of the second table, however, is the 5th row of the entire collection and, thus, is treated as "even" and is bolded.