jQuery - Esplorazione - Fratelli (siblings)

Con jQuery, possiamo facilmente navigare orizzontalmente nell'albero DOM per trovare gli elementi同级.

Gli elementi fratelli sono quegli elementi che condividono lo stesso elemento padre.

In questa sezione spiegheremo come navigare orizzontalmente nell'albero DOM.

Navigazione orizzontale dell'albero DOM

Abbiamo i seguenti metodi jQuery per la navigazione orizzontale dell'albero DOM:

• siblings()

• next()

• nextAll()

• Metodi nextUntil() e prevUntil() di jQuery

• prev()

• prevAll()

• jQuery

In questa sezione ti mostreremo come utilizzare ogni metodo.

Metodo jQuery siblings()

Il metodo restituisce tutti gli elementi同级 successivi ai due parametri dati. siblings()Il metodo restituisce tutti gli elementi同级 dell'elemento selezionato.

Esempio di ritorno di tutti gli elementi同级 di ogni elemento <li> con la classe "middle":

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

Puoi anche utilizzare un parametro opzionale per filtrare la ricerca degli elementi同级.

Esempio di ritorno di tutti gli elementi同级 con la classe "bold" di ogni elemento elenco:

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

Metodo jQuery next()

Il metodo restituisce tutti gli elementi同级 successivi ai due parametri dati. next()Il metodo restituisce il fratello successivo immediato dell'elemento selezionato.

Esempio di ritorno dell'elemento同级 successivo di ogni DIV:

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

Metodo jQuery nextAll()

Il metodo restituisce tutti gli elementi同级 successivi ai due parametri dati. nextAll()Il metodo restituisce tutti gli elementi同级 successivi dell'elemento selezionato.

Esempio di ritorno di tutti gli elementi同级 successivi di ogni DIV:

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

Metodo jQuery prev()

Il metodo restituisce tutti gli elementi同级 successivi ai due parametri dati. prev()Il metodo restituisce il fratello successivo dell'elemento selezionato, che è adiacente all'elemento selezionato.

Esempio di ritorno dell'elemento同级 successivo di ogni DIV:

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

Metodo jQuery prevAll()

Il metodo restituisce tutti gli elementi同级 successivi ai due parametri dati. prevAll()Il metodo restituisce tutti gli elementi同级 precedenti dell'elemento selezionato.

Esempio di ritorno di tutti gli elementi同级 precedenti di ogni DIV:

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

jQuery nextUntil()和prevUntil()方法

Il metodo restituisce tutti gli elementi同级 successivi ai due parametri dati. Metodi nextUntil() e prevUntil() di jQuerynextUntil()

Il metodo restituisce tutti gli elementi同级 successivi ai due parametri dati. jQueryprevUntil()

Il metodo restituisce tutti gli elementi同级 precedenti ai due parametri dati.

$("document").ready(function(){
　　Esempio seguente che restituisce tutti i fratelli successivi a <dt id="term-2"> fino al successivo <dt>:
});

Esempio seguente che restituisce tutti i fratelli precedenti a <dt id="term-2"> fino al precedente <dt>:

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

Riferimento alla navigazione di jQuery

Per riferimento completo ai metodi di navigazione, visitare il nostroRiferimento alla navigazione di jQuery.