Gli ultimi tutorial di sviluppo web
 

jQuery Attraversamento - Fratelli

❮ Precedente Successivo Capitolo ❯

I fratelli condividono lo stesso genitore.

Con jQuery si può attraversare lateralmente nella struttura DOM di trovare i fratelli di un elemento.

Attraversamento Sideways nel DOM albero

Ci sono molti metodi utili jQuery per attraversare lateralmente nell'albero DOM:

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

jQuery siblings() Metodo

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

Nell'esempio seguente vengono restituiti tutti gli elementi di pari livello di <h2> :

Esempio

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

È inoltre possibile utilizzare un parametro opzionale per filtrare la ricerca per i fratelli.

Nell'esempio seguente vengono restituiti tutti gli elementi di pari livello di <h2> che sono <p> elementi:

Esempio

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

jQuery next() Metodo

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

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

Esempio

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

jQuery nextAll() Metodo

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

Nell'esempio seguente vengono restituiti tutti gli elementi successivo fratello del <h2> :

Esempio

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

jQuery nextUntil() Metodo

Il nextUntil() restituisce tutti gli elementi di pari livello prossimo tra due date argomenti.

Nell'esempio seguente vengono restituiti tutti gli elementi di pari livello tra un <h2> e <h6> elemento:

Esempio

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

jQuery prev(), prevAll() & prevUntil() Metodi

Il prev(), prevAll() e prevUntil() metodi funzionano esattamente come i metodi di cui sopra, ma con funzionalità inverso: tornano elementi di pari livello precedenti (attraversare a ritroso lungo elementi di pari livello nella struttura DOM, invece che in avanti).

Mettiti alla prova con esercizi!

Esercizio 1 » Esercizio 2» Esercizio 3 » Esercizio 4» Esercizio 5 » Esercizio 6»

jQuery di movimento di riferimento

Per una panoramica completa di tutti i metodi di jQuery a movimento laterale, si prega di visitare il nostro jQuery traslazione di riferimento .


❮ Precedente Successivo Capitolo ❯