web-dev-qa-db-fra.com

Comment obtenir le parent du n-ième niveau d'un élément dans jQuery?

Lorsque je veux obtenir, par exemple, le parent de troisième niveau de l'élément sur lequel je dois écrire $('#element').parent().parent().parent() Existe-t-il une méthode plus optimale pour cela?

javascriptjqueryparent
134
Artur Keyan

Puisque parents () renvoie les éléments ancêtres ordonnés du plus proche aux éléments extérieurs, vous pouvez les chaîner dans eq () :

$('#element').parents().eq(0);  // "Father".
$('#element').parents().eq(2);  // "Great-grandfather".
237
Frédéric Hamidi

Dépend de vos besoins, si vous savez quel parent vous recherchez, vous pouvez utiliser le sélecteur .parents ().

E.G: http://jsfiddle.net/HenryGarle/Kyp5g/2/

<div id="One">
    <div id="Two">
        <div id="Three">
            <div id="Four">

            </div>
        </div>
    </div>
</div>


var top = $("#Four").parents("#One");

alert($(top).html());

Exemple utilisant index:

//First parent - 2 levels up from #Four
// I.e Selects div#One
var topTwo = $("#Four").parents().eq(2);

alert($(topTwo ).html());
25
Henry

Un moyen plus rapide consiste à utiliser JavaScript directement, par exemple.

var parent = $(innerdiv.get(0).parentNode.parentNode.parentNode);

Cela s'exécute beaucoup plus rapidement sur mon navigateur que de chaîner les appels jQuery .parent(). 

Voir: http://jsperf.com/jquery-get-3rd-level-parent

6
a'r

Vous pouvez donner au parent cible un identifiant ou une classe (par exemple, myParent). La référence est avec $('#element').parents(".myParent").

6
Joseph Marikle

Si vous avez un parent commun, vous pouvez utiliser parentsUntil () link

par exemple: $('#element').parentsUntil('.commonClass')

L’avantage est que vous ne devez pas vous souvenir du nombre de générations entre cet élément et le parent commun (défini par commonclass).

3
ashishyadaveee11

Nous n'avons trouvé aucune réponse à l'aide de closest() Et je pense que c'est la réponse la plus simple lorsque vous ne savez pas combien de niveaux l'élément requis est élevé, alors envoyez une réponse:
Vous pouvez utiliser la fonction closest() combinée à des sélecteurs pour obtenir le premier élément correspondant lors du déplacement vers le haut à partir de l'élément:

('#element').closest('div')    // returns the innermost 'div' in its parents
('#element').closest('.container')    // returns innermost element with 'container' class among parents
('#element').closest('#foo')    // returns the closest parent with id 'foo'
2
Dane

C'est simple. Juste utiliser 

$(selector).parents().eq(0);

où 0 est le niveau parent (0 est le parent, 1 est le parent du parent, etc.)

2
zatatatata

Si vous envisagez de réutiliser cette fonctionnalité, la solution optimale consiste à créer un plugin jQuery:

(function($){
$.fn.nthParent = function(n){
  var $p = $(this);
  while ( n-- >= 0 )
  {
    $p = $p.parent();
  }
  return $p;
};
}(jQuery));

Bien sûr, vous souhaiterez peut-être l’étendre pour permettre un sélecteur facultatif et d’autres choses du même genre.

Remarque: ceci utilise un index basé sur 0 pour les parents, donc nthParent(0) équivaut à appeler parent(). Si vous préférez une indexation basée sur 1, utilisez n-- > 0

2
zzzzBov

vous pouvez aussi utiliser :

$(this).ancestors().eq(n)

ex: $(this).ancestors().eq(2) -> le parent du parent de this. 

1
Mouna Cheikhna

Ajoutez simplement le sélecteur :eq() comme ceci:

$("#element").parents(":eq(2)")

Vous spécifiez juste quel index: 0 pour le parent immédiat, 1 pour le grand-parent, ...

1
MBO

Vous pouvez utiliser quelque chose comme ceci:

(function($) {
    $.fn.parentNth = function(n) {
        var el = $(this);
        for(var i = 0; i < n; i++)
            el = el.parent();

        return el;
    };
})(jQuery);

alert($("#foo").parentNth(2).attr("id"));

http://jsfiddle.net/Xeon06/AsNUu/

0
Alex Turpin

Comme parents () retourne une liste, cela fonctionne aussi

$('#element').parents()[3];
0
DidThis

using eq semble saisir le DOM dynamique, alors que utiliser .parent (). parent () semble saisir le DOM initialement chargé (si cela est possible).

Je les utilise tous les deux sur un élément auquel des classes l'appliquent on on mouseover. eq montre les classes alors que .parent (). parent () ne le fait pas.

0
user875234