web-dev-qa-db-fra.com

jQuery: sélection des grands-parents

Existe-t-il une meilleure façon de sélectionner des éléments de grands-parents dans jQuery afin d'éviter cela?

$(this).parent().parent().parent().parent().parent().children(".title, .meta").fadeIn("fast");

Merci.

jqueryjquery-selectors
48
aneuryzm

Vous pouvez utiliser la méthode parents() qui compare les parents à un sélecteur

http://api.jquery.com/parents/

Ou si vous utilisez 1.4, il y a une nouvelle méthode parentsUntil()

http://api.jquery.com/parentsUntil/

53
Neil Aitken

En plus de parents(), comme ils l'ont dit, vous devriez aussi consultez closest() . Lisez la comparaison dans la documentation, mais ses principales différences sont qu'il ne recherche qu'un seul résultat, et il inclut $(this) dans ce qu'il recherche (pourrait obtenir la chose que vous recherchez si vous n'êtes pas assez précis). Avantages et inconvénients.

24
D_N

J'ai écrit ce plugin simple parce que je pensais avoir une sélection de classe sans ambiguïté quelque part me donnant des erreurs. La sélection des grands-parents semblait plus directe que $().parents() pour ce cas particulier.

Eh bien, j'ai utilisé cela une fois, puis j'ai réalisé que j'avais en fait une erreur d'orthographe. Je ne sais pas à quel point c'est vraiment utile. $('myelem').gparent(2); vous donne le grand-parent de 'myelem'.

(function( $ ){
$.fn.gparent = function( recursion ){
    if( recursion == undefined ) recursion = 2;
    if(typeof(recursion) == "number"){
        recursion = parseInt( recursion );
        if( recursion > 0 ){
            gparent_holder = $(this);
            for(var gparent_i = 0; gparent_i < recursion; gparent_i++){
                gparent_holder = gparent_holder.parent();
            }
            return gparent_holder;
        }
        else return false;
    }
    else return false;
}
})( jQuery );
5
Femi

Utilisez le sélecteur parents() pour obtenir tous les parents d'un élément. Vous pouvez alors soit rechercher la collection, soit itérer dessus si vous souhaitez affecter tous les ancêtres.

2
Traveling Tech Guy

@Femi avait une réponse pour ce faire et a mentionné la récursivité, mais sa solution n'était pas récursive, voici une solution jQuery récursive pour obtenir les ancêtres d'un élément:

$.fn.gparent = function( recursion ){
   console.log( 'recursion: ' + recursion );
   if( recursion > 1 ) return $(this).parent().gparent( recursion - 1 );
   return $(this).parent();
};

Si c'est votre HTML:

<div id='grandparent'>
  <div id='parent'>
    <div id='child'>
      child
    </div>
  </div>
</div>

Tu peux appeler

console.log( $('#child').gparent( 2 ) );

pour obtenir le grand-parent de l'élément child. Voici le JSFiddle

2
patrick

L'utilisation de parents() et children() donne les mêmes résultats.

Exemple au lieu d'utiliser ceci:

$(this).parent().parent().parent().children(".title").fadeIn("fast");

vous pouvez utiliser ceci:

$(this).parents().children(".title").fadeIn("fast");
0
NJENGAH