2009-03-02 12 views
3

Sind die folgenden genau gleichwertig? Welches Idiom benutzt du und warum?jQuery äquivalente Selektoren

$('#form1 .edit-field :input') 
$('#form1 .edit-field').find(':input') 
$('.edit-field :input', '#form1') 
$(':input', '#form1 .edit-field') 

Antwort

8

würde ich entweder # 2 oder # 4 verwenden. Hinter dem Vorhang, wenn Sie einen Kontext angeben das ist, was sowieso passiert:

jQuery(context).find(selector); 

Der Grund würde ich # 1 und # 3 ist zu vermeiden, weil sie beide deutlich langsamer als # 2/# 4 sind.


EDIT: habe gerade einen Schnelltest: 1000 Eingabeelemente IHRE Selektoren:

$('#form1 .edit-field :input')   // 55ms 
$('#form1 .edit-field').find(':input') // 21ms 
$('.edit-field :input', '#form1')   // 47ms 
$(':input', '#form1 .edit-field')   // 18ms 
+0

Es ist ein bisschen seltsam, dass die erste Form so langsam ist, aber sobald Browser QuerySelector/querySelectorAll unterstützen, kann es effizienter werden. –

+0

Interessant; Ich hätte nie nach solch einem signifikanten Leistungsunterschied gesucht. Guter Fund. –

+0

Seltsam, aber gut zu wissen. Ich frage mich dann, wie würde $ ('# form1') finden ('. Edit-field') .find (': input') ausführen. Wenn Ihre Maße gültig sind, würde ich erwarten, dass dieses Formular noch besser ist ... –

4

Die ersten beiden sind äquivalent, wenn die Elementauswahl vergleicht.

$('#form1 .edit-field').find(':input') 
    ... 
.end().find(':hidden')... 
.end()... 

Ich bin unsicher: Allerdings ist die zweite Form, wenn es in einer Befehlskette mit einem correspoding end() Anruf verwendet wird, kann innerhalb von „# form1 .edit-Feld“, also weitere Kind wählen Elemente verwendet werden, die zweiten beiden Formen, ich glaube wirklich, dass sie nicht gültig sind. Korrigieren Sie mich, wenn ich falsch liege, aber auf der Grundlage der Dokumente, wäre die richtige Syntax wie folgt aussehen:

$('.edit-field :input', $('#form1')) 
$(':input', $('#form1 .edit-field')) 

So oder so, IMHO diese weniger sind consise Weisen die gleiche sagen.

Zusammenfassend, im Allgemeinen würde ich bei der ersten Form bleiben, es sei denn, Sie nutzen den Vorteil der zweiten, um weitere Kinder zu überqueren, wie oben erläutert.

+0

+1 für .end() Überlegungen –

+0

+1 für Ende() zu, und alle Originale gelten wie zur Verfügung gestellt. aber dann sind deine korrekturen auch mal gültig :) –

0

Je mehr ich in jQuery codiere, desto weniger benutze ich Selektoren und desto mehr traverse ich stattdessen. Ich würde tun:

Es ist länger, aber vermittelt den Auswahlprozess besser mit ein bisschen mehr Bedeutung für jeden Schritt. Traversieren ist günstiger für die Verkettung, und es macht end() nützlich.

$('#form1 .edit-field').find(':input') 
$(':input', '#form1 .edit-field') 

Beide oben sind im Wesentlichen gleich:

+0

Das geht nicht wirklich, per se. – James

0

würde ich verschiedene Formen verwenden, basierend auf, was ich habe bereits und welche Elemente Ich muss auch mit der Arbeit . Wenn ich zum Beispiel mit anderen Feldern im selben Formular arbeiten muss, speichere ich einen Verweis auf $ ('# form1'), um die Suche danach mehrfach zu speichern.