JQuery-äquivalente Selektoren

Question

Sind die folgenden genau äquivalent? Welches Idiom verwendest du und warum?

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

Answer 1

Ich würde entweder #2 oder #4 verwenden:

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

Beide oben genannten sind im Grunde dasselbe. Hinter den Kulissen passiert dies ohnehin, wenn du einen Kontext angibst:

jQuery( context ).find( selector );

Ich würde #1 und #3 meiden, da sie beide deutlich langsamer sind als #2/#4.

---

BEARBEITEN: Habe gerade einen schnellen Test gemacht: 1000 Eingabeelemente mit DEINEN Selektoren:

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

Answer 2

Die ersten beiden sind äquivalent, wenn das Elementauswahl verglichen wird. Allerdings kann die zweite Form, wenn sie in einer Befehlskette mit einem entsprechenden end()-Aufruf verwendet wird, zur Auswahl weiterer untergeordneter Elemente innerhalb von "#form1 .edit-field" verwendet werden, d.h.:

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

I'm uncertain about the second two forms, actually, I beleive they are not valid. Correct me if I'm wrong, but based on the docs, the correct syntax would look like this:

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

Egal wie, meiner Meinung nach sind das weniger prägnante Möglichkeiten, dasselbe zu sagen.

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

Answer 3

Je mehr ich in jQuery code, desto weniger verwende ich Selektoren und desto mehr durchlaufe ich stattdessen. Ich würde tun:

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

Es ist länger, aber vermittelt den Auswahlprozess besser mit etwas mehr Bedeutung für jeden Schritt. Das Traversieren ist für das Verketten von Methoden günstiger und macht end() nützlich.

Answer 4

Ich würde verschiedene Formulare verwenden, je nachdem, was ich bereits habe und mit welchen Elementen ich auch arbeiten muss. Wenn ich zum Beispiel mit anderen Feldern im selben Formular arbeiten muss, speichere ich eine Referenz auf das $('#form1'), um mehrfaches Suchen danach zu vermeiden.