Der geeignetste Weg, dies zu erhalten: $($(.answer”)[0])

Angenommen, ich möchte das erste Element unter allen Elementen der Klasse „.answer“ abrufen.

$($(".answer")[0])

Ich kann das oben genannte tun, aber was ist die beste Balance zwischen Eleganz und Geschwindigkeit?

*Die Frage wurde geändert, um die aktuelle Diskussion widerzuspiegeln

Ich kann nicht zum Aspekt der Eleganz sprechen, aber der Leistungsaspekt kann hier tatsächlich einen großen Unterschied machen.

Es sieht aus wie, aus einer Reihe von JavaScript-Testsdass Ihre ursprüngliche Methode tatsächlich die ist die meisten effizient, und im Gegensatz zu der Hypothese, dass die akzeptierte Antwort mit Nicht-CSS-Sizzle-Selektoren verknüpft ist viel weniger effizient als Methodenselektoren. Dafür gibt es einen Grund. Das $('.answer') kann den Browser nativ verwenden getElementsByClass() ohne die Ergebnisse manuell durchlaufen zu müssen. Das :first Selektor erschwert das. In diesem Fall scheint die Verwendung der Sizzle-Selektoren die Auswahl um einen Faktor zwischen 4 und 5 zu verlangsamen.

Ich würde argumentieren, dass bei jQuery die Leistung die Eleganz übertrumpfen sollte, und alle Beweise (jeder einzelne Browser, den ich bisher getestet habe!) scheinen darauf hinzudeuten, dass die unelegante Lösung von OP bei weitem die schnellste ist.

Hier die Ergebnisse der Browser mit den meisten Testläufen:

(Die Zahlen sind „Vorgänge pro Sekunde“, höhere Zahlen sind also schneller, niedrigere Zahlen langsamer.)

Die folgenden Funktionen sind alle gleichwertig (jedoch nicht in der Geschwindigkeit):

• var a0 = $($('.answer')[0]);
• var a0 = $('.answer').first(); – sehen http://api.jquery.com/first/
• var a0 = $('.answer:first'); – sehen http://api.jquery.com/first-selector/
• var a0 = $('.answer').eq(0); – sehen http://api.jquery.com/eq/
• var a0 = $('.answer:eq(0)'); – sehen http://api.jquery.com/eq-selector/

Welches ist das Beste?

Es wurde die Hypothese aufgestellt, dass die Selektorversionen sollte schneller sein als die Methodenversionen (und die Logik macht Sinn), aber ich habe noch keinen zuverlässigen Cross-Browser-Benchmark für mehrere Dokumente gefunden, der dies beweist.

Und in einigen Fällen können Sie den Selektor nicht verwenden, da Sie ein jQuery-Objekt haben, das aus verketteten Ergebnissen resultiert, und es später reduzieren müssen.

Bearbeiten: Basierend auf den hervorragenden Informationen aus den Tests von @yc unten sind die aktuellen (2011-Feb-4) Testergebnisse zusammengefasst und mit einem Ausgangswert von verglichen .answer:first:

          :first  :eq(0)  .first()  .eq(0)  $($('...')[0])
Chrome 8+   100%     92%      224%    266%       367%
   FF 3.6   100%    100%      277%    270%       309%
  FF 4.0b   100%    103%      537%    521%       643%
 Safari 5   100%     93%      349%    352%       467%
 Opera 11   100%    103%      373%    374%       465%
     IE 8   100%    101%     1130%   1246%      1767%
 iPhone 4   100%     95%      269%    316%       403%
=====================================================
 Weighted   100%     92%      286%    295%       405%
    Major   100%     95%      258%    280%       366%

• Das Gewichtet Linie zeigt die Performance gewichtet nach Anzahl der Tests pro Browser; gängige Browser (darunter Testing) werden stärker gezählt.
• Das Haupt Zeile zeigt dasselbe, nur einschließlich Nicht-Beta-Versionen der wichtigsten Desktop-Browser.

Zusammenfassend: Die Hypothese ist (derzeit) falsch. Die Methoden sind erheblich schneller als die Sizzle-Selektoren und fast ohne Ausnahme der OP-Code $($('.answer')[0]) ist der schnellste von allen!

Verwenden Sie die :first Selektor oder die .first Filtermethode:

$(".answer:first");

oder:

$(".answer").first();