jQuery vieraileminen - jälkeläiset

Jälkeläiset ovat lapsi, lapsenlapsi, lapsenlapsenlapsi jne.

jQuery:n avulla voit tutkia DOM-puun alaspäin löytääksesi elementtien jälkeläiset.

Alaspäin tutkiminen DOM-puussa

Seuraavat kaksi jQuery-menetelmää käytetään DOM-puun alaspäin tutkimiseen:

  • children()
  • find()

jQuery children() menetelmä

children() menetelmä palauttaa valittujen elementtien kaikki suorat lapsenlapset.

Tämä menetelmä tutkii vain DOM-puun seuraavaa tasoja.

Seuraava esimerkki palauttaa jokaisen <div>-elementin kaikki suorat lapsenlapset:

Esimerkki

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

Kokeile itse

Voit myös käyttää valinnaisia parametreja suodattaa etsintää lapsenlapsista.

Seuraava esimerkki palauttaa kaikkien "1" nimisistä <p>-elementeistä, jotka ovat <div>-elementin suorat lapsenlapset:

Esimerkki

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

Kokeile itse

jQuery find() menetelmä

find() menetelmä palauttaa valittujen elementtien jälkeläiset, aina viimeiseen jälkeläiseen asti.

Seuraava esimerkki palauttaa kaikki <div>-jälkeläisistä olevat <span>-elementit:

Esimerkki

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

Kokeile itse

Seuraava esimerkki palauttaa kaikki <div>-elementin jälkeläiset:

Esimerkki

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

Kokeile itse

jQuery läpikäyntiin liittyvä käsikirja

Jos haluat tietää kaikki jQuery-läpikäymismenetelmät, vieritse jQuery läpikäyntiin liittyvä käsikirja