Wie erhalte ich das übergeordnete Element der n-ten Ebene eines Elements in jQuery?

Wenn ich zum Beispiel das übergeordnete Element der 3. Ebene des Elements erhalten möchte, das ich schreiben muss. $('#element').parent().parent().parent()Gibt es dafür eine optimalere Methode?

Da parent () die Ahnenelemente zurückgibt, die von den nächstgelegenen zu den äußeren geordnet sind, können Sie sie in eq () verketten :

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

Abhängig von Ihren Anforderungen können Sie den Selektor .parents () verwenden, wenn Sie wissen, nach welchem ​​Elternteil Sie suchen.

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());

Beispiel mit Index:

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

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

Sie können dem übergeordneten Ziel eine ID oder Klasse (z. B. myParent) geben, auf die verwiesen wird $('#element').parents(".myParent")

Ein schnellerer Weg ist die direkte Verwendung von Javascript, z.

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

Dies läuft in meinem Browser erheblich schneller als das Verketten von jQuery- .parent()Aufrufen.

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

closest() Ich habe keine Antwort mit gefunden und ich denke, es ist die einfachste Antwort, wenn Sie nicht wissen, wie viele Ebenen das erforderliche Element enthält. Geben
Sie daher eine Antwort: Sie können die closest()Funktion in Kombination mit Selektoren verwenden, um das erste passende Element zu erhalten beim Aufwärtsfahren vom Element nach oben:

('#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'

Es ist einfach. Benutz einfach

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

Dabei ist 0 die übergeordnete Ebene (0 ist die übergeordnete Ebene, 1 ist die übergeordnete Ebene der Eltern usw.)

Fügen Sie einfach einen :eq()Selektor wie folgt hinzu:

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

Sie geben nur den Index an, welcher Elternteil: 0 für den unmittelbaren Elternteil, 1 für den Großelternteil, ...

Wenn Sie diese Funktionalität wiederverwenden möchten, besteht die optimale Lösung darin, ein jQuery-Plugin zu erstellen:

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

Natürlich können Sie es erweitern, um einen optionalen Selektor und andere solche Dinge zu ermöglichen.

Ein Hinweis: Dies verwendet einen 0basierten Index für Eltern, nthParent(0)ist also dasselbe wie das Aufrufen parent(). Wenn Sie lieber eine 1basierte Indizierung haben möchten, verwenden Sien-- > 0

Wenn Sie ein gemeinsames übergeordnetes Div haben, können Sie den Link parentUntil () verwenden

z.B: $('#element').parentsUntil('.commonClass')

Der Vorteil ist, dass Sie sich nicht daran erinnern müssen, wie viele Generationen zwischen diesem Element und dem gemeinsamen übergeordneten Element (definiert durch commonclass) vorhanden sind.

Sie können auch verwenden:

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

Beispiel: $(this).ancestors().eq(2)-> der Elternteil des Elternteils von this.

Sie könnten so etwas verwenden:

(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/

Die Verwendung von eq scheint das dynamische DOM zu erfassen, während die Verwendung von .parent (). parent () das ursprünglich geladene DOM zu erfassen scheint (falls dies überhaupt möglich ist).

Ich verwende sie beide für ein Element, auf das Klassen es bei onmouseover angewendet haben. Gleichung zeigt die Klassen, während .parent (). parent () dies nicht tut.

Da parent () eine Liste zurückgibt, funktioniert dies auch

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