jQuery-Throughsuche - Brüder (siblings)

Mit jQuery können wir leicht quer im DOM-Baum abfragen, um Gleichrangige zu finden.

Brüderlemente sind Elemente, die denselben Elternteil teilen.

In diesem Kapitel erläutern wir, wie man im DOM-Baum quer abfragt.

Querabfrage im DOM-Baum

Wir haben folgende jQuery Methoden zur Querabfrage im DOM-Baum:

• siblings()

• next()

• nextAll()

• nextUntil()

• prev()

• prevAll()

• prevUntil()

Dieses Kapitel zeigt Ihnen, wie Sie jede Methode verwenden.

jQuery siblings() Methode

jQuery siblings()Die Methode gibt alle gleichrangigen Elemente des ausgewählten Elements zurück.

Das folgende Beispiel gibt jedem <li>-Element mit der Klasse "middle" alle gleichrangigen Elemente zurück:

$(document).ready(function(){
　　$("li.middle").siblings().css("background"-color", "lightgreen");
});

Sie können auch optionalen Parameter verwenden, um die Suche nach Gleichrangigen zu filtern.

Der folgende Beispiel gibt jedem Listenitem alle gleichrangigen Elemente mit der Klasse "bold" zurück:

$(document).ready(function(){
　　$("li").siblings(".bold").css("background"-color", "lightgreen");
});

jQuery next() Methode

jQuery next()Die Methode gibt das nächste gleichrangige Element, das direkt nach dem ausgewählten Element liegt, zurück.

Der folgende Beispiel gibt jedem DIV-Element das nächste gleichrangige Element zurück:

$(document).ready(function(){
　　$("div").next().css("background", "lightblue");
});

jQuery nextAll() Methode

jQuery nextAll()Die Methode gibt alle folgenden gleichrangigen Elemente des ausgewählten Elements zurück.

Der folgende Beispiel gibt jedem DIV-Element alle folgenden gleichrangigen Elemente zurück:

$(document).ready(function(){
　　$("div").nextAll().css("background", "lightblue");
});

jQuery prev() Methode

jQuery prev()Die Methode gibt das nächste Brüderlement zurück, das direkt neben dem ausgewählten Element liegt.

Der folgende Beispiel gibt jedem DIV-Element das vorherige gleichrangige Element zurück:

$(document).ready(function(){
　　$("div").prev().css("background", "lightblue");
});

jQuery prevAll() Methode

jQuery prevAll()Die Methode gibt alle vorherigen gleichrangigen Elemente des ausgewählten Elements zurück.

Der folgende Beispiel gibt jedem DIV-Element alle vorherigen gleichrangigen Elemente zurück:

$(document).ready(function(){
　　$("div").prevAll().css("background", "lightblue");
});

jQuery nextUntil() und prevUntil() Methoden

jQuery nextUntil()Die Methode gibt alle folgenden gleichrangigen Elemente zwischen zwei gegebenen Parametern zurück。

jQuery prevUntil()Die Methode gibt alle vorherigen gleichrangigen Elemente zwischen zwei gegebenen Parametern zurück。

Der folgende Beispiel gibt zurück in<dt id="term-2">alle folgenden nächsten Geschwister bis zum nächsten<dt>：</

$(document).ready(function(){
　　$("#term-2").nextUntil("dt").css("background-color", "coral");
});

Der folgende Beispiel gibt zurück<dt id="term-2">alle vorherigen Geschwister, bis zum vorherigen<dt>：</

$(document).ready(function(){
　　$("#term-2").prevUntil("dt").css("background-color", "coral");
});

jQuery Durchsuchen Referenz

Für eine vollständige Durchsuchungsmethode Referenz besuchen Sie bitte unserejQuery Durchsuchen Referenz.