jQuery: Wie komme ich zu einem bestimmten Kind eines Elternteils?

92

Um ein vereinfachtes Beispiel zu geben, habe ich den folgenden Block auf der Seite viele Male wiederholt (er wird dynamisch generiert):

<div class="box">
   <div class="something1"></div>
   <div class="something2">
      <a class="mylink">My link</a>
   </div>
</div>

Wenn ich darauf klicke, kann ich zum übergeordneten Link des Links gelangen mit:

$(".mylink").click(function() {
   $(this).parents(".box").fadeOut("fast");
});

Allerdings ... muss ich zu dem <div class="something1">eines bestimmten Elternteils gelangen.

Kann mir jemand sagen, wie ich mich auf ein übergeordnetes Geschwister beziehen soll, ohne direkt darauf verweisen zu können? Nennen wir es großen Bruder. Ein direkter Verweis auf den Klassennamen des großen Bruders würde dazu führen, dass jede Instanz dieses Elements auf der Seite ausgeblendet wird - was nicht der gewünschte Effekt ist.

Ich habe es versucht:

parents(".box .something1") ... no luck.
parents(".box > .something1") ... no luck.
siblings() ... no luck.

Jemand? Vielen Dank.

— Tom
quelle

Anurags Antwort scheint vielleicht nicht die richtige zu sein - es hat mich sicherlich zum Nachdenken gebracht -, aber sie weist auf einen offensichtlichen Tippfehler in Ihrem Code hin, der dazu führt, dass Ihre Auswahl fehlschlägt. Der Selektor in jQuery ist .parent() nicht .parents()

— David sagt, Monica am

@ Ricebowl: Falsch. api.jquery.com/parents

— SLaks

@ricebowl ... parent () würde mir div etwas geben2, also brauche ich parent (), um zur div-Box zu gelangen.

— Tom

Ah; Entschuldigen Sie. Ähm ... Ich weiß nicht, ob es am besten ist, meine Unwissenheit offen zu lassen oder den Fehler zu löschen, um andere nicht zu verärgern ... = | Immerhin habe ich heute etwas Nützliches gelernt; das ist der Punkt, richtig ..? =)

— David sagt, Monica am

1

@ Ricebowl, keine Sorge, danke für deinen Beitrag.

— Tom

143

Beim Aufruf .parents(".box .something1")werden alle übergeordneten Elemente zurückgegeben, die dem Selektor entsprechen .box .something. Mit anderen Worten, es werden übergeordnete Elemente zurückgegeben, die .something1sich innerhalb und innerhalb von befinden .box.

Sie müssen die Kinder des nächsten Elternteils wie folgt bekommen:

$(this).closest('.box').children('.something1')

Dieser Code ruft .closestauf, um das innerste übergeordnete .childrenElement mit einem Selektor abzugleichen, und ruft dann dieses übergeordnete Element auf, um den Onkel zu finden, den Sie suchen.

— SLaks
quelle

Ich weiß, dass dies ein bisschen alt ist, aber ist es in diesem Fall nicht besser, parent () anstelle von next () zu verwenden, da ich mir vorstelle, dass mit next () mehr Bäume durchquert werden ?

— rmorse

1

@acSlater: Er braucht Baumdurchquerung. parent()ist das falsche Element.

— SLaks

Ah ja, es ist parent (). Parent (), dass Tom Entschuldigung braucht! :)

— rmorse

1

@acSlater: Ja; das würde funktionieren. Dadurch wird das Javascript jedoch viel stärker an die HTML-Struktur gekoppelt. .closest(...)ist widerstandsfähiger und auch lesbarer.

— SLaks

7

Falls sich jemand wundert: Wenn Sie mit .closest () das richtige Elternteil gefunden haben und nach einem untergeordneten Element suchen, das KEIN direktes Kind ist (sondern beispielsweise ein Kind eines Kindes), verwenden Sie einfach. find () anstelle von .children.

— Fabien Snauwaert

17

$(this).parent()

Das Durchqueren von Bäumen macht Spaß

$(this).parent().siblings(".something1");

$(this).parent().prev(); // if you always want the parent's previous sibling

$(this).parents(".box").children(".something1");

Und noch viel mehr Möglichkeiten, diese Dokumente könnten hilfreich sein.

— Anurag
quelle

Danke, suchte aber nicht nach dem Elternteil, sondern nach einem anderen Kind des Elternteils (oder eigentlich des Großelternteils).

— Tom

Hehe ... es ist in der Tat eine Familienangelegenheit.

— Tom

13

Dadurch wird der erste Elternteil mit Klasse gefunden, boxdann wird die erste untergeordnete Klasse mit Regex-Übereinstimmung gefunden somethingund die ID abgerufen.

$(".mylink").closest(".box").find('[class*="something"]').first().attr("id")

— user2601995
quelle

6

Wenn ich Ihr Problem richtig verstanden habe, $(this).parents('.box').children('.something1')suchen Sie danach?

— Teja Kantamneni
quelle

5

Sie können .each()mit .children()und einen Selektor in der Klammer verwenden:

//Grab Each Instance of Box.
$(".box").each(function(i){

    //For Each Instance, grab a child called .something1. Fade It Out.
    $(this).children(".something1").fadeOut();
});

— Olly
quelle