Ce qui est plus efficace: .parent (). Parent (). Parent () ~ ou ~ parents (". Foo") ~ ou ~ le plus proche (". Foo")

Question

J'ai une balise A qui déclenche l'animation de son arrière-arrière-arrière-grand-parent. Tous les éléments suivants fonctionneront, mais lequel est le plus efficace et pourquoi?

 $(this).parent().parent().parent().parent().parent().animate(...);

$(this).parents(".foo").animate(...);

$(this).closest(".foo").animate(...);
 

Je soupçonne que le premier pourrait être, car c'est le plus explicite, mais pour des raisons de maintenance (l'imbrication peut changer), je préfère le second. Ils semblent tous bien fonctionner dans la pratique.

Answer 1

Voici un analyzation:

• parent() promenades juste de remonter d'un niveau dans l'arborescence DOM.
• parents(".foo") promenades jusqu'à la racine et sélectionne uniquement les éléments qui correspondent au sélecteur de donnée .foo.
• closest(".foo") promenades jusqu'à la racine, mais s'arrête une fois qu'un élément correspond au sélecteur .foo.

Donc, je choisirais la dernière, closest(".foo"). La raison:

• C'est mieux que le chaînage parent, parce que si votre document changements parce que vous avez supprimé ou ajouté une hiérarchie, vous n'avez pas besoin de modifier le code jQuery.
• C'est mieux que d' parents(".foo"), car il s'arrête dès qu'une correspondance a été trouvée.

Answer 2

Bien plus proche n'est utile que si vous allez vers le haut ou le même niveau sur le 'cliqué' élément. Par exemple, si vous avez à le scénario suivant:

<div class="controls radio-other">
    <label class="radio"><input type="radio" name="item">Option one</label>
    <label class="radio"><input type="radio" name="item">Option two</label>
    <label class="radio"><input type="radio" name="item" class="other-option" data-othertarget="#otherone"> Other... </label>
<input type="text" placeholder="Alternative answer" id="otherone" class="hidden">

   </div>

Ensuite le plus proche('#otherone') ne sera pas trouver ce qui est caché champ de texte sur $('.autres-option").cliquez sur() La meilleure solution est dans ce scénario est d'utiliser $(this).parentsUntil('.radio-autres").find('#otherone')

Regarde ma réponse, j'ai fait un jsperf ici qui reflète le scénario ci-dessus avec des solutions différentes. Juste à utiliser ce qui est le plus utile pour votre html scénario. le résultat est que les parent().parent() est la methode la plus rapide mais ce n'est pas toujours une bonne option si votre code html est de plus de souplesse dans l'utilisation. Ajouter un div parent et le parent().parent() pauses.

Answer 3

C'est une très bonne chose que vous ayez fait des mesures de performance. C'est exactement ce qui devrait être fait dans de tels scénarios. Si tout semble bien se dérouler dans la pratique et que vous êtes satisfait des performances, choisissez la plus lisible (les deuxième et troisième semblent corrects).

Answer 4

Je pense que j'ai vu une présentation de John Resig dire que le plus proche() est plus optimisé, et c'est un peu logique. La plus proche() est une nouvelle de plus pour jQuery et vient de résoudre exactement ce vilain parent().parent() de la chaîne. D'autre part les parents() retourne un tableau de parents qui correspondent à votre classe foo et est plus gourmand en termes de recherche par rapport à la plus proche() qui trouve le premier élément et arrête la recherche.

Je parie que la plus proche (le) est la plus efficace si vous êtes à la recherche pour la correspondance la plus proche.

Answer 5

Je ne peux pas faire de commentaire sur la vitesse réelle, mais la première vous lie à une hiérarchie d'éléments spécifique, que je préfère éviter.

Personnellement, j'essaie quand même d'utiliser les sélecteurs de classe avec parcimonie. Je me rends compte qu'il n'y a souvent pas d'autre moyen, mais si je peux prendre en compte un sélecteur d'identification, je sais que les performances sont susceptibles de s'améliorer de toute façon.