jQuery Traversing - Broers en zussen
Met jQuery kun je zijwaarts in de DOM-structuur gaan om broers en zussen van een element te vinden.
Broers en zussen delen dezelfde ouder.
Zijwaarts oversteken in de DOM-boom
Er zijn veel handige jQuery-methoden om zijwaarts in de DOM-boom te navigeren:
siblings()next()nextAll()nextUntil()prev()prevAll()prevUntil()
jQuery broers en zussen() Methode
De siblings()methode retourneert alle zusterelementen van het geselecteerde element.
Het volgende voorbeeld retourneert alle zusterelementen van <h2>:
Voorbeeld
$(document).ready(function(){
$("h2").siblings();
});
U kunt ook een optionele parameter gebruiken om de zoekopdracht naar broers en zussen te filteren.
Het volgende voorbeeld retourneert alle zusterelementen van <h2>die <p>
elementen:
Voorbeeld
$(document).ready(function(){
$("h2").siblings("p");
});
jQuery next() Methode
De next()methode retourneert het volgende zusterelement van het geselecteerde element.
Het volgende voorbeeld retourneert de volgende broer of zus van <h2>:
Voorbeeld
$(document).ready(function(){
$("h2").next();
});
jQuery nextAll() Methode
De nextAll()methode retourneert alle volgende zusterelementen van het geselecteerde element.
Het volgende voorbeeld retourneert alle volgende broer/zus-elementen van
<h2>:
Voorbeeld
$(document).ready(function(){
$("h2").nextAll();
});
jQuery nextTot() Methode
De nextUntil()methode retourneert alle volgende broer/zus-elementen tussen twee gegeven argumenten.
Het volgende voorbeeld retourneert alle zusterelementen tussen a <h2>en een <h6>element:
Voorbeeld
$(document).ready(function(){
$("h2").nextUntil("h6");
});
jQuery prev(), prevAll() & prevUntil() Methoden
De methoden prev(), prevAll()en prevUntil()werken net als de bovenstaande methoden, maar met omgekeerde functionaliteit: ze retourneren eerdere broer/zus-elementen (achterwaarts langs broer/zus-elementen in de DOM-structuur, in plaats van vooruit).
jQuery-oefeningen
jQuery Traversing Referentie
Ga voor een compleet overzicht van alle jQuery Traversing-methoden naar onze jQuery Traversing Reference .