La façon la plus appropriée d'obtenir ceci : $($(".answer")[0])

Question

Supposons que je veuille obtenir le premier élément parmi tous les éléments de la classe ".answer".

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

Je peux faire ce qui précède, mais quel est le meilleur équilibre entre élégance et rapidité ?

*changer la question pour refléter la discussion actuelle

Answer 1

Je ne peux pas parler de l'aspect élégance, mais l'aspect performance peut faire une énorme différence.

On dirait, à partir d'un ensemble de tests JavaScript que votre méthode originale est en fait la le plus efficace, et contrairement à l'hypothèse à laquelle la réponse acceptée fait référence, les sélecteurs Sizzle non-CSS tendent à être mucho moins efficaces que les sélecteurs de méthodes. Il y a une raison à cela. Le site $('.answer') peut utiliser le navigateur natif getElementsByClass() sans avoir à parcourir manuellement les résultats. Le site :first complique les choses. Dans ce cas, l'utilisation des sélecteurs de grésillement semble ralentir la sélection par un facteur de 4 à 5.

Je dirais qu'avec jQuery, les performances doivent l'emporter sur l'élégance, et tout semble indiquer (tous les navigateurs que j'ai testés jusqu'à présent !) que la solution inélégante de l'OP est la plus rapide, et de loin.

Voici les résultats des navigateurs ayant fait l'objet du plus grand nombre de tests :

(Les chiffres sont des "opérations par seconde", donc les chiffres les plus élevés sont plus rapides, les chiffres les plus bas sont plus lents).

Answer 2

Les produits suivants sont tous équivalents en termes de fonctionnalité (mais pas de vitesse) :

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

Lequel est le meilleur ?
Il a fait l'objet d'une hypothèse que les versions du sélecteur devrait être plus rapide que les versions de la méthode (et la logique a un certain sens) mais je n'ai pas encore trouvé un benchmark fiable multi-navigateurs et multi-documents qui prouve que c'est vrai.

Et dans certains cas, vous ne pouvez pas utiliser le sélecteur, car vous avez un objet jQuery résultant de résultats enchaînés et devez le réduire ultérieurement.

Modifier : Sur la base des excellentes informations provenant des tests de @yc ci-dessous, voici les résultats des tests actuels (2011-Feb-4) résumés et comparés à une base de référence de .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%

• En Pondéré La ligne montre les performances pondérées par le nombre de tests par navigateur ; les navigateurs les plus populaires (parmi ceux qui ont été testés) sont comptés plus fortement.
• En Major montre la même chose, en incluant uniquement les versions non bêta des principaux navigateurs de bureau.

En résumé : l'hypothèse est (actuellement) fausse. Les méthodes sont nettement plus rapides que les sélecteurs Sizzle et, à peu près sans exception, le code de l'OP. $($('.answer')[0]) est le plus rapide de tous !

Answer 3

Utilisez le :first ou le sélecteur .first méthode de filtrage :

$(".answer:first");

ou :

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