Unterschied zwischen $ ('# tabs a') und $ ('# tabs'). Finden ('a')

Question

Ich habe folgende Struktur

<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> 

jetzt, indem Sie auf den Anker-Tag folgenden Code Ich betreibe und das funktioniert gut.

Ich benutze pycharm, die Warnung für die Zeile hinzufügt, indem Sie "Vorwort mit ID-Selektor" sagen. Wenn ich darauf klicke, ändert sich pycharm in folgende

Beide funktionieren gut, aber ich verstehe den Unterschied nicht.

Was ist der Unterschied in beiden oder genauer gesagt, was ist der Unterschied zwischen $('#tabs a[href="#ddd"]') und $('#tabs').find('a[href="#ddd"]')?

Answer 1

$("#tabs a") wertet von rechts nach links - das ist die native Richtung sowohl Sizzle Selektor-Engine und querySelectorAll - das heißt zuerst findet es all der Ankerelemente auf der Seite und dann verengt sich unter #tabs die nach unten.

$("#tabs").find("a") bewertet - mehr intuitiv - von nach rechts links, das heißt zuerst findet es #tabs, und dann nur die Ankerelemente darunter.

Offensichtlich würde Letzteres better performance ergeben, aber es würde nur akkumulativ auffallen; das heißt, wenn Sie Tausende von Abfragen ausführen. Ansonsten ist der Unterschied vernachlässigbar.

Answer 2

Das zweite ist schneller VIEL. Der Grund dafür ist jQuerys Wahlschalter Sizzle, der die Auswahl von rechts bis links durchläuft, nicht umgekehrt.

Dies bedeutet, dass der Selektor

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

zuerst den DOM Dokument für einen Tag abfragt, der das Attribut href Satz #ddd enthält. Es filtered dann alle von ihnen, um jeden zu bekommen, der ein <a> Tag ist. Zuletzt durchquert er den DOM-Baum für jeden Knoten und versucht, einen Elternknoten zu finden #tabs.

Stellen Sie sich eine Site mit 1.000 Tags mit href="#ddd" vor, wie enorm langsam das wäre.

DANN.

Die andere Variante pycharm vorschlagen, ist zunächst ein Element zu finden #tabs. Dies ist sehr schnell, da jQuery die native Browser-Methode getElementById() verwenden kann. Mit diesem Knoten kann es nach unten durchquert alle Tags zu finden, die passen. Auf diese Weise muss nicht all tags in the whole DOM-tree überprüft werden. Nur diejenigen, die tatsächlich in #tabs sind.

Für weitere Informationen besuchen Sie bitte this page in the documentation aus.

Answer 3

Der Effekt ist der gleiche: Finden Sie Anker, die den Wert #ddd als href haben und sind ein Nachkomme von #tabs. Der Unterschied liegt in der Art und Weise, dies zu erreichen.

Die erste Lösung findet die Anker und überprüft dann, ob sie ein Nachkomme von #tabs sind.

Die zweite Lösung findet #tabs und findet dann die Anker. Was natürlich schneller sein sollte. im Vergleich zu den ersten Selektor

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

Answer 4

.find() bessere Leistung klug ist, deshalb PyCharm es an den Wähler .find()

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

mit Änderungen

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

Answer 5

in "Increase Specificity from Left to Right" angegeben Als :

Ein wenig Wissen über die Selector-Engine von jQuery ist nützlich. Es funktioniert aus dem letzten Wähler zunächst so, in älteren Browsern, eine Abfrage wie:

$("p#intro em"); 

Lasten jedes em Element in ein Array. Es funktioniert dann die Eltern von jeden Knoten und lehnt diejenigen ab, wo p # Intro nicht gefunden werden kann. Die Abfrage ist besonders ineffizient, wenn Sie Hunderte von em-Tags auf der Seite haben.

Je nach Dokument kann die Abfrage optimiert werden, indem zuerst der am besten qualifizierte Selektor abgerufen wird. Es kann dann als Ausgangspunkt für Kindselektoren, z.

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

Aber Test case sagt $("#tabs > a")wäre schnellste

Answer 6

Der Unterschied ist, dass zu finden ist() können Sie auf eine Reihe von Elementen auf einer Auswahl filtern Sie bereits gemacht haben, Rückkehr und Array von Elementen, wenn das der Fall ist.

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

Und es ist eine präzise Art und Weise für ein Element zu suchen, weil Sie sagen, „hey, zu #tabs gehen und findet mich all a[href=“#ddd”] da drin“ statt Sie sagen: „Hey, finden mich das alles Jungs $('#tabs a[href=“#ddd”]') in all den Code, den ich habe. "

Answer 7

Während in den meisten Fällen die Leistung der einzige Unterschied ist, kann der Unterschied im Ansatz auch das Ergebnis Ihres Codes beeinflussen, abhängig davon, welche Selektoren Sie verwenden.

Zum Beispiel fügt $("table").find("tr:even").addClass("even"); die Klasse "even" zu jeder zweiten Zeile in jeder einzelnen Tabelle hinzu, die zurückgegeben wird.Also, wenn die „even“ Klasse der Text in den Zeilen fett macht und Sie haben zwei Tabellen mit jeweils 3 Zeilen, würden Sie das folgende Ergebnis erhalten:

---

dies Tabelle eine Zeile 1

Dies ist eine Tabelle, Reihe 2

Dies ist eine Tabelle, Reihe 3

---

dies Tabelle zwei, Reihe 1

dies Tabelle zwei, Reihe 2

dies Tabelle zwei, Reihe 3

---

In beiden Fällen ist die 1. und 3. Reihe jeder Tabelle (dh die "geraden" Zeilen). . . Lass mich nicht mit dem even Filter von JQuery anfangen, indem ich die ungeraden Zeilen auswähle. . .) sind fett gedruckt.

Auf der anderen Seite wird $("table tr:even").addClass("even"); die "even" -Klasse zu jeder anderen Zeile in der gesamten Gruppe von Zeilen aus allen Tabellen kombiniert hinzufügen.

---

dies Tabelle eine, Reihe 1

dies Tabelle eine, Reihe 2

dies Tabelle eine, Reihe 3

---

Diese Tabelle ist zwei, Reihe 1

dies Tabelle zwei, Reihe 2

dies Tabelle zwei, Zeile 3

---

In dieser Situation ist das die erste und dritte Zeile der zweiten Tabelle sind eigentlich die 4. und 6. Reihen der ganze Gruppe von <tr> Elemente, so dass sie als "ungerade" behandelt werden. Die zweite Zeile der zweiten Tabelle ist jedoch die fünfte Zeile der gesamten Sammlung und wird daher als "gerade" behandelt und fett dargestellt.