webentwicklung-frage-antwort-db.com.de

Wie bekomme ich die n-te Ebene eines Elements in jQuery

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

134
Artur Keyan

Da eltern () die Vorfahrenelemente zurückgibt, die den äußeren Elementen am nächsten angeordnet sind, können Sie sie in eq () verketten

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

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

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

Beispiel mit Index:

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

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

Ein schnellerer Weg ist es, Javascript direkt zu verwenden, z.

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

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

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

6
a'r

Sie können dem übergeordneten Ziel eine ID oder Klasse (z. B. myParent) geben. Die Referenz ist mit $('#element').parents(".myParent").

6
Joseph Marikle

Wenn Sie ein gemeinsames übergeordnetes div haben, können Sie elternUntil () link verwenden.

zB: $('#element').parentsUntil('.commonClass')

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

3

Ich habe keine Antwort gefunden mit closest() Und ich denke, es ist die einfachste Antwort, wenn Sie nicht wissen, wie viele Ebenen das erforderliche Element ist.
Sie können die Funktion closest() in Kombination mit Selektoren verwenden, um das erste Element zu erhalten, das übereinstimmt, wenn Sie vom Element nach oben gehen:

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

Es ist einfach. Benutz einfach 

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

wobei 0 die übergeordnete Ebene ist (0 ist Elternteil, 1 Elternteil usw.)

2
zatatatata

Wenn Sie diese Funktionalität wiederverwenden möchten, ist es die beste Lösung, ein jQuery-Plugin zu erstellen:

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

Natürlich möchten Sie es möglicherweise erweitern, um einen optionalen Wahlschalter und andere solche Dinge zuzulassen.

Eine Anmerkung: Dies verwendet einen 0-basierten Index für Eltern, daher ist nthParent(0) dasselbe wie der Aufruf von parent(). Wenn Sie lieber eine 1-basierte Indizierung haben, verwenden Sie n-- > 0.

2
zzzzBov

sie können auch verwenden:

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

beispiel: $(this).ancestors().eq(2) -> das übergeordnete Elternteil von this

1
Mouna Cheikhna

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

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

Geben Sie einfach den Index an, dessen übergeordnetes Element: 0 für das unmittelbare Elternteil, 1 für das Großelternteil,.

1
MBO

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/

0
Alex Turpin

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

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

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

Ich benutze beide für ein Element, auf das Klassen auf onmouseover angewendet werden. eq zeigt die Klassen, während .parent (). parent () dies nicht tut.

0
user875234