jQuery Traversing - Voorouers


Met jQuery kan jy deur die DOM-boom beweeg om voorouers van 'n element te vind.

'n Voorvader is 'n ouer, grootouer, oupagrootjie, ensovoorts.


Deur die DOM-boom te beweeg

Drie nuttige jQuery-metodes om deur die DOM-boom te beweeg is:

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

jQuery ouer() Metode

Die parent()metode gee die direkte ouerelement van die geselekteerde element terug.

Hierdie metode deurkruis slegs 'n enkele vlak teen die DOM-boom.

Die volgende voorbeeld gee die direkte ouerelement van elke <span> element terug:

Voorbeeld

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


jQuery ouers() Metode

Die parents()metode gee alle voorouerelemente van die geselekteerde element terug, tot by die dokument se wortelelement ( <html>).

Die volgende voorbeeld gee alle voorouers van alle <span>elemente terug:

Voorbeeld

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

Jy kan ook 'n opsionele parameter gebruik om die soektog na voorouers te filter.

Die volgende voorbeeld gee alle voorouers van alle <span>elemente wat <ul> elemente is terug:

Voorbeeld

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

jQuery ouersUntil() Metode

Die parentsUntil()metode gee alle voorouerelemente tussen twee gegewe argumente terug.

Die volgende voorbeeld gee alle voorouerelemente tussen 'n <span>en 'n <div>element terug:

Voorbeeld

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

jQuery Oefeninge

Toets jouself met oefeninge

Oefening:

Gebruik 'n jQuery-metode om die direkte ouer van 'n <span>-element te kry.

$("span").();


jQuery Traversing Reference

Vir 'n volledige oorsig van alle jQuery Traversing metodes, gaan asseblief na ons jQuery Traversing Reference .