jQuery Traversing - Voorouders


Met jQuery kun je door de DOM-boom bladeren om voorouders van een element te vinden.

Een voorouder is een ouder, grootouder, overgrootouder, enzovoort.


De DOM-boom oversteken

Drie handige jQuery-methoden om door de DOM-boom te bladeren zijn:

  • parent()
  • parents()
  • parentsUntil()

jQuery parent() Methode

De parent()methode retourneert het directe bovenliggende element van het geselecteerde element.

Deze methode doorloopt slechts één niveau hoger in de DOM-boom.

Het volgende voorbeeld retourneert het directe bovenliggende element van elk <span> element:

Voorbeeld

$(document).ready(function(){
  $("span").parent();
});


jQuery-ouders() Methode

De parents()methode retourneert alle voorouderelementen van het geselecteerde element, helemaal tot aan het hoofdelement van het document ( <html>).

Het volgende voorbeeld retourneert alle voorouders van alle <span>elementen:

Voorbeeld

$(document).ready(function(){
  $("span").parents();
});

U kunt ook een optionele parameter gebruiken om de zoekopdracht naar voorouders te filteren.

Het volgende voorbeeld retourneert alle voorouders van alle <span>elementen die <ul> elementen zijn:

Voorbeeld

$(document).ready(function(){
  $("span").parents("ul");
});

jQuery-oudersTot () Methode

De parentsUntil()methode retourneert alle voorouderelementen tussen twee gegeven argumenten.

Het volgende voorbeeld retourneert alle bovenliggende elementen tussen a <span>en een <div>element:

Voorbeeld

$(document).ready(function(){
  $("span").parentsUntil("div");
});

jQuery-oefeningen

Test jezelf met oefeningen

Oefening:

Gebruik een jQuery-methode om de directe ouder van een <span>-element te krijgen.

$("span").();


jQuery Traversing Referentie

Ga voor een compleet overzicht van alle jQuery Traversing-methoden naar onze jQuery Traversing Reference .