jQuery: Großeltern auswählen

Lesezeit: 3 Minuten

Benutzer-Avatar
Aneurysma

Gibt es eine bessere Möglichkeit, Großelternelemente in jQuery auszuwählen, um dies zu vermeiden?

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

Vielen Dank.

  • und was ist mit children().children().children().children(.title) ?

    – Aneurysma

    3. März 2010 um 15:35 Uhr

  • Konnte nicht widerstehen, Sie können $(this).gparent(2) mit dem Code verwenden, der in meiner abgelehnten Antwort angegeben ist. Ich weiß nicht, warum es abgelehnt wurde, da es die Lösung ist, die Ihre Frage beantwortet …

    – Patrick

    18. Januar 2018 um 11:46 Uhr

Benutzer-Avatar
Neil Aitken

Du kannst den … benutzen parents() Methode, die Eltern mit einem Selektor abgleicht

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

Oder wenn Sie 1.4 verwenden, gibt es eine neue parentsUntil() Methode

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

Zusätzlich zu parents()wie sie gesagt haben, sollten Sie auch Kasse closest(). Lesen Sie den Vergleich in der dortigen Dokumentation, aber seine Hauptunterschiede bestehen darin, dass er nur nach einem Ergebnis sucht und es einschließt $(this) in dem, was gesucht wird (könnte das, wonach Sie suchen, erhalten, wenn Sie nicht spezifisch genug sind). Vor-und Nachteile.

Ich habe dieses einfache Plugin geschrieben, weil ich dachte, ich hätte irgendwo eine eindeutige Klassenauswahl, die mir Fehler verursacht. Die Auswahl der Großeltern schien direkter als $().parents() für diesen speziellen Fall.

Nun, ich habe das einmal benutzt und dann festgestellt, dass ich tatsächlich einen Rechtschreibfehler hatte. Ich bin mir nicht sicher, wie hilfreich es wirklich ist. $('myelem').gparent(2); bringt dir den Großelternteil von ‘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 );

  • Ich mag diese Lösung. Wir sind in jQuery > 2.0 und es gibt immer noch keinen einfachen, sauberen Weg, um „k“ Ebenen nach oben zu navigieren. Scheint eine triviale Sache zu sein, die dem Basisframework hinzugefügt werden kann.

    – Evan Steinkerchner

    22. Juli 2014 um 14:56 Uhr

  • schön, Rekursivität zu bringen. Eine rekursive Funktion ist eine großartige Lösung für Probleme wie diese … Ihre Lösung ist jedoch nicht rekursiv. Ich habe ein rekursives Snippet als Antwort auf diese Frage gepostet

    – Patrick

    8. Juli 2016 um 22:32 Uhr

@Femi hatte eine Antwort darauf und erwähnte Rekursion, aber seine Lösung war nicht rekursiv, hier ist eine rekursive jQuery-Lösung zum Abrufen von Vorfahren eines Elements:

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

Wenn dies Ihr HTML ist:

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

Du kannst anrufen

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

den Großelternteil des Elements zu bekommen child. Hier ist die JSFiddle

Verwenden Sie die parents() Selektor, um alle Eltern eines Elements zu erhalten. Sie können dann entweder die Sammlung durchsuchen oder darüber iterieren, wenn Sie alle Vorfahren betreffen möchten.

Benutzer-Avatar
Odilio Witteveen

Verwenden parents() und children() gleiche Ergebnisse bekommen.

Beispiel anstatt dies zu verwenden:

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

Sie können dies verwenden:

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

1282700cookie-checkjQuery: Großeltern auswählen

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy