jQuery Traversing - Afstammelinge


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

'n Afstammeling is 'n kind, kleinkind, agterkleinkind, ensovoorts.


Dwars deur die DOM-boom

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

  • children()
  • find()

jQuery kinders() Metode

Die children()metode gee alle direkte kinders van die geselekteerde element terug.

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

Die volgende voorbeeld gee alle elemente terug wat direkte kinders van elke <div>element is:

Voorbeeld

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

Jy kan ook 'n opsionele parameter gebruik om die soektog vir kinders te filter.

Die volgende voorbeeld gee alle <p>elemente met die klasnaam "eerste", wat direkte kinders van is <div>:

Voorbeeld

$(document).ready(function(){
  $("div").children("p.first");
});


jQuery vind() Metode

Die find()metode gee afstammelinge elemente van die geselekteerde element terug, tot by die laaste afstammeling.

Die volgende voorbeeld gee alle <span>elemente terug wat afstammelinge is van <div>:

Voorbeeld

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

Die volgende voorbeeld gee alle afstammelinge van <div>:

Voorbeeld

$(document).ready(function(){
  $("div").find("*");
});

jQuery Oefeninge

Toets jouself met oefeninge

Oefening:

Gebruik 'n jQuery metode om alle direkte kinders van 'n <div> element element te kry.

$("div").();


jQuery Traversing Reference

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