Quelle est la méthode la plus rapide pour sélectionner les éléments descendants dans jQuery ?

Question

Aussi loin à l'est que je connais, il y a un certain nombre de façons de choisir les éléments enfants dans jQuery.

//Store parent in a variable  
var $parent = $("#parent");

Méthode 1 (à l'aide d'un champ)

$(".child", $parent).show();

Méthode 2 (méthode find ())

$parent.find(".child").show();

Méthode 3 (Pour les enfants immédiats uniquement)

$parent.children(".child").show();

Méthode 4 (via le sélecteur CSS) - suggéré par @spinon

$("#parent > .child").show();

Méthode 5 (identique à la Méthode 2) - selon @Kai

$("#parent .child").show();

Je ne suis pas familier avec le profilage pour être en mesure de les étudier sur le mien, donc j'aimerais voir ce que vous avez à dire.

Merci d'avance,

Marko

P. S. je comprends que c'est un double possible de cette question , mais il ne couvre pas toutes les méthodes.

Answer 1

Méthode 1 et la méthode 2 sont identiques, la seule différence est que la méthode 1 besoins d'analyser la portée passé et de le traduire à un appel à l' $parent.find(".child").show();.

Méthode 4 et 5 Méthode à la fois besoin d'analyser le sélecteur et puis il suffit d'appeler: $('#parent').children().filter('.child') et $('#parent').filter('.child') respectivement.

Donc, la méthode 3 qui sera toujours la plus rapide parce qu'il a besoin de faire le moins de travail et utilise la méthode la plus directe pour obtenir des enfants de premier niveau.

Basé sur Anurag révisée de la vitesse de tests ici: http://jsfiddle.net/QLV9y/1/

Test de vitesse: (Plus c'est Mieux)

Sur Chrome, la Méthode 3 est la meilleure méthode then 1/2 et puis 4/5

Sur Firefox, la Méthode 3 est encore mieux, alors la méthode 1/2 et puis 4/5

Sur l'Opéra, la Méthode 3 est encore mieux, alors la méthode de 4/5 et puis 1/2

Sur IE 8, bien que plus lent que les autres navigateurs, il suit toujours la Méthode 3, 1,2,4,5 de la commande.

Dans l'ensemble, la méthode 3 est le overal meilleure méthode à utiliser comme il est appelé directement et il n'a pas besoin de parcourir plus d'un niveau d'éléments d'enfant contrairement à la méthode 1/2 et il n'a pas besoin d'être analysé comme méthode de 4/5

Cependant, gardez à l'esprit que, dans certains de ces principes, nous sommes comparer des pommes à des oranges comme la Méthode 5 ressemble à tous les enfants à la place de premier niveau.

Answer 2

Méthode 1

Ne peut pas être plus court et plus rapide à l'aide de jQuery. Cet appel directement vers le bas à l' $(context).find(selector) (méthode 2, en raison de optimazation) qui, à son tour, appelle getElementById.

Méthode 2

Est de faire de même, mais sans certains inutiles interne des appels de fonction.

Méthode 3

à l'aide de children() est plus rapide que d'utiliser find(), mais bien sûr, children() ne trouverez direct pour enfants de l'élément racine alors qu' find() recherche recursivly de haut en bas pour tous les enfants elemens(y compris les sous-éléments d'enfant)

Méthode 4

À l'aide des sélecteurs de ce genre, doit être plus lent. Depuis sizzle (ce qui est le sélecteur moteur de jQuery) travaille de droite à gauche, elle correspond à TOUTES les classes .child d'abord avant qu'il regarde si ils sont un enfant direct de l'id de "parent".

Méthode 5

Comme vous l'avez indiqué correctement, cet appel permettra également de créer un $(context).find(selector) d'appels, en raison de certaines optimazation au sein de l' jQuery de la fonction, sinon il pourrait aussi passer par la (plus lent) sizzle engine.