jQuery Traversing - Fratelli


Con jQuery puoi attraversare lateralmente l'albero DOM per trovare fratelli di un elemento.

I fratelli condividono lo stesso genitore. 


Attraversamento laterale nell'albero DOM

Esistono molti metodi jQuery utili per l'attraversamento laterale nell'albero DOM:

  • siblings()
  • next()
  • nextAll()
  • nextUntil()
  • prev()
  • prevAll()
  • prevUntil()

jQuery siblings() Metodo

Il siblings()metodo restituisce tutti gli elementi di pari livello dell'elemento selezionato.

L'esempio seguente restituisce tutti gli elementi di pari livello di <h2>:

Esempio

$(document).ready(function(){
  $("h2").siblings();
});

Puoi anche utilizzare un parametro facoltativo per filtrare la ricerca di fratelli.

L'esempio seguente restituisce tutti gli elementi di pari livello <h2>che sono <p> elementi:

Esempio

$(document).ready(function(){
  $("h2").siblings("p");
});


jQuery next() Metodo

Il next()metodo restituisce l'elemento di pari livello successivo dell'elemento selezionato.

L'esempio seguente restituisce il fratello successivo di <h2>:

Esempio

$(document).ready(function(){
  $("h2").next();
});

jQuery metodo nextAll()

Il nextAll()metodo restituisce tutti gli elementi di pari livello successivi dell'elemento selezionato.

L'esempio seguente restituisce tutti gli elementi di pari livello successivi di <h2>:

Esempio

$(document).ready(function(){
  $("h2").nextAll();
});

Metodo jQuery nextUntil()

Il nextUntil()metodo restituisce tutti gli elementi di pari livello successivi tra due argomenti dati.

L'esempio seguente restituisce tutti gli elementi di pari livello tra a <h2>e un <h6>elemento:

Esempio

$(document).ready(function(){
  $("h2").nextUntil("h6");
});

jQuery metodi prev(), prevAll() e prevUntil()

I metodi prev(), prevAll()e prevUntil()funzionano proprio come i metodi precedenti ma con funzionalità inversa: restituiscono elementi di pari livello precedenti (attraverso indietro lungo gli elementi di pari livello nell'albero DOM, anziché in avanti).


Esercizi jQuery

Mettiti alla prova con gli esercizi

Esercizio:

Usa un metodo jQuery per ottenere tutti gli elementi fratelli di un elemento <h2>.

$("h2").();


Riferimento per l'attraversamento di jQuery

Per una panoramica completa di tutti i metodi di jQuery Traversing, vai al nostro jQuery Traversing Reference .