jQuery traversning - sibling

Syskon har samma förälder.

Genom jQuery kan du traversera syskon till element i DOM-trädet.

Horisontell traversering i DOM-trädet

Det finns många användbara metoder som låter oss traversera horisontellt i DOM-trädet:

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

jQuery siblings() metoden

siblings() metoden returnerar alla syskon till det valda elementet.

Följande exempel returnerar alla syskon till <h2> elementet:

Exempel

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

Prova själv

Du kan också använda valfria parametrar för att filtrera sökningen efter syskon.

Följande exempel returnerar alla <p> element som är syskon till <h2> elementet:

Exempel

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

Prova själv

jQuery next() metoden

next() metoden returnerar nästa syskon till det valda elementet.

Denna metod returnerar bara ett element.

Följande exempel returnerar nästa syskon till <h2> elementet:

Exempel

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

Prova själv

jQuery nextAll() metoden

nextAll() metoden returnerar alla efterföljande syskon till det valda elementet.

Följande exempel returnerar alla efterföljande syskon till <h2> elementet:

Exempel

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

Prova själv

jQuery nextUntil() metoden

nextUntil() metoden returnerar alla efterföljande syskon mellan två angivna parametrar.

Följande exempel returnerar alla syskon mellan <h2> och <h6> elementen:

Exempel

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

Prova själv

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

prev(), prevAll() och prevUntil() metoder fungerar på samma sätt som ovanstående metoder, men i motsatt riktning: de returnerar föregående syskon (genom att traversera syskon i DOM-trädet bakåt, inte framåt).

jQuery genomgångshandbok

För att få reda på alla jQuery genomgångsmetoder, besök vår jQuery genomgångshandbok。