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

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

Puisque parents () retourne les éléments ancêtres classés des plus proches des éléments externes, vous pouvez les enchaîner dans eq () :

$('#element').parents().eq(0);  // "Father".
$('#element').parents().eq(2);  // "Great-grandfather".

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

EG: 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 l'index:

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

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

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

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

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

Cela fonctionne beaucoup plus rapidement sur mon navigateur que le chaînage des .parent()appels jQuery .

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

Je n'ai trouvé aucune réponse en utilisant closest() et je pense que c'est la réponse la plus simple lorsque vous ne savez pas combien de niveaux il y a l'élément requis, alors postez une réponse:
vous pouvez utiliser la closest()fonction combinée avec des sélecteurs pour obtenir le premier élément qui correspond lors du déplacement vers le haut depuis 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'

C'est simple. Juste utiliser

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

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

Ajoutez simplement un :eq()sélecteur comme celui-ci:

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

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

Si vous prévoyez de réutiliser cette fonctionnalité, la solution optimale est de 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 voudrez peut-être l'étendre pour permettre un sélecteur facultatif et d'autres choses similaires.

Une note: cela utilise un 0index basé pour les parents, c'est donc nthParent(0)la même chose que l'appel parent(). Si vous préférez une 1indexation basée, utilisezn-- > 0

Si vous avez un parent div commun, vous pouvez utiliser le lien parentsUntil ()

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

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

vous pouvez aussi utiliser :

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

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

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/

l'utilisation de l'eq semble saisir le DOM dynamique tandis que l'utilisation de .parent (). parent () semble saisir le DOM initialement chargé (si cela est même possible).

Je les utilise tous les deux sur un élément auquel des classes sont appliquées sur onmouseover. eq montre les classes alors que .parent (). parent () ne le fait pas.

Lorsque parents () renvoie une liste, cela fonctionne également

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