Soweit ich weiß, gibt es in jQuery verschiedene Möglichkeiten, untergeordnete Elemente auszuwählen .
//Store parent in a variable
var $parent = $("#parent");
Methode 1 (unter Verwendung eines Bereichs)
$(".child", $parent).show();
Methode 2 (die find () -Methode)
$parent.find(".child").show();
Methode 3 (Nur für unmittelbare Kinder)
$parent.children(".child").show();
Methode 4 (über CSS-Selektor) - vorgeschlagen von @spinon
$("#parent > .child").show();
Methode 5 (identisch mit Methode 2 ) - gemäß @Kai
$("#parent .child").show();
Ich bin nicht mit Profiling vertraut, um dies selbst untersuchen zu können, daher würde ich gerne sehen, was Sie zu sagen haben.
PS Ich verstehe, dass dies ein mögliches Duplikat dieser Frage ist, aber es werden nicht alle Methoden behandelt.
Antworten:
Methode 1 und Methode 2 sind identisch, mit dem einzigen Unterschied, dass Methode 1 den übergebenen Bereich analysieren und in einen Aufruf an übersetzen muss
$parent.find(".child").show();
.Methode 4 und Methode 5 sowohl Notwendigkeit , den Selektor parsen und dann einfach anrufen:
$('#parent').children().filter('.child')
und$('#parent').filter('.child')
jeweils.So Methode 3 wird immer die schnellste sein , weil es die geringste Menge an Arbeit tun muss , und verwendet die direkteste Methode der ersten Ebene Kinder zu bekommen.
Basierend auf Anurags überarbeiteten Geschwindigkeitstests hier: http://jsfiddle.net/QLV9y/1/
Geschwindigkeitstest: (Mehr ist besser)
Auf Chrome ist Methode 3 die beste, dann Methode 1/2 und dann 4/5
In Firefox ist Methode 3 immer noch am besten als Methode 1/2 und dann 4/5
In Opera ist Methode 3 immer noch am besten als Methode 4/5 und dann 1/2
Auf IE 8 folgt es zwar insgesamt langsamer als andere Browser, folgt jedoch immer noch der Reihenfolge von Methode 3, 1,2,4,5.
Insgesamt ist Methode 3 die insgesamt beste Methode, da sie direkt aufgerufen wird und im Gegensatz zu Methode 1/2 nicht mehr als eine Ebene untergeordneter Elemente durchlaufen muss und nicht wie Methode 4/5 analysiert werden muss
Beachten Sie jedoch, dass wir in einigen Fällen Äpfel mit Orangen vergleichen, da Methode 5 alle Kinder anstelle von Kindern der ersten Stufe betrachtet.
quelle
$parent.find(".child");
Befehl zu übersetzen .Methode 1
Kann mit jQuery nicht kürzer und schneller sein. Dieser Aufruf führt direkt zu
$(context).find(selector)
( Methode 2 aufgrund von Optimierung), die wiederum aufruftgetElementById
.Methode 2
Tut das gleiche, aber ohne unnötige interne Funktionsaufrufe.
Methode 3
Die Verwendung
children()
ist schneller als die Verwendungfind()
, findet aber natürlichchildren()
nur direkte Kinder desfind()
Stammelements, während die Suche rekursiv von oben nach unten nach allen untergeordneten Elementen (einschließlich untergeordneter Elemente) erfolgt.Methode 4
Die Verwendung solcher Selektoren muss langsamer sein. Da
sizzle
(dies ist die Selektor-Engine von jQuery) von rechts nach links funktioniert , werden zuerst ALLE Klassen abgeglichen,.child
bevor überprüft wird, ob sie ein direktes untergeordnetes Element der ID 'parent' sind.Methode 5
Wie Sie richtig angegeben haben, wird dieser Aufruf
$(context).find(selector)
aufgrund einiger Optimierungen innerhalb derjQuery
Funktion auch einen Aufruf erzeugen , andernfalls könnte er auch den (langsameren) durchlaufensizzle engine
.quelle
Internally, selector context is implemented with the .find() method
-Bitte aktualisieren Sie, ich weiß, dass Sie auf den Etiketten des OP verwirrt waren :)#parent
stellt eine ID dar. Wenn es sich um eine Klasse handelt, wird siegetElementById
offensichtlich nicht verwendet .Da es sich um einen alten Beitrag handelt und sich die Dinge mit der Zeit ändern. Ich habe bisher einige Tests mit den letzten Browserversionen durchgeführt und poste sie hier, um Missverständnisse zu vermeiden.
Bei Verwendung von jQuery 2.1 in HTML5- und CSS3-kompatiblen Browsern ändert sich die Leistung.
Hier ist das Testszenario und die Ergebnisse:
Für 100 000 Iterationen bekomme ich also:
(Ich habe sie zu Formatierungszwecken als img hinzugefügt.)
Sie können das Code-Snippet selbst ausführen, um es zu testen;)
quelle
.find()
es einen tollen Job macht. Weiter benutzen. :)