jQuery gennemgang - medbrodre

Søskende har samme forældreelement.

Med jQuery kan du gennemtræve elementer i DOM-træet.

Horisontal gennemtræning i DOM-træet

Der er mange nyttige metoder, der lader os gennemtræve DOM-træet horisontalt:

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

jQuery siblings() metode

siblings() metoden returnerer alle søskende elementer til det valgte element.

Følgende eksempel returnerer alle søskende elementer til <h2>:

Eksempel

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

Prøv det selv

Du kan også bruge valgfri parametre til at filtrere søgningen af søskende elementer.

Følgende eksempel returnerer alle <p> elementer, der tilhører søskende til <h2>:

Eksempel

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

Prøv det selv

jQuery next() metode

next() metoden returnerer det næste søskende element til det valgte element.

Denne metode returnerer kun et element.

Følgende eksempel returnerer det næste søskende element til <h2>:

Eksempel

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

Prøv det selv

jQuery nextAll() metode

nextAll() metoden returnerer alle efterfølgende søskende elementer til det valgte element.

Følgende eksempel returnerer alle efterfølgende søskende elementer til <h2>:

Eksempel

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

Prøv det selv

jQuery nextUntil() metode

nextUntil() metoden returnerer alle efterfølgende søskende elementer mellem to givne parametre.

Følgende eksempel returnerer alle søskende elementer mellem <h2> og <h6> elementer:

Eksempel

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

Prøv det selv

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

prev(), prevAll() og prevUntil() metoder fungerer på samme måde som ovenstående metoder, men i den modsatte retning: de returnerer de foregående søskende elementer (i DOM-træet følger søskende elementer bagud, ikke fremad).

jQuery gennemgangshåndbog

For at få viden om alle jQuery-gennemgangsmetoder, besøg vores jQuery gennemgangshåndbog。