jQuery läpikäynti - isovanhemmat

Isovanhemmat ovat isä, isoisä tai isoisoisä jne.

jQuery:n avulla voit tutkia ylöspäin DOM-puuta löytääksesi elementin isovanhemmat.

Ylöspäin tutkiminen DOM-puuta

Nämä jQuery metodit ovat hyödyllisiä, ne käytetään ylöspäin tutkimaan DOM-puuta:

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

jQuery parent() metodi

parent() metodi palauttaa valitun elementin suoraisen isovanhemman.

Tämä metodi tutkii vain yhdessä tasossa DOM-puuta.

Seuraava esimerkki palauttaa jokaisen <span> elementin suoraisen isovanhemman:

Esimerkki

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

Kokeile itse

jQuery parents() metodi

parents() metodi palauttaa valitun elementin kaikki isovanhemmat, aina dokumentin juureen (<html>) asti.

Seuraava esimerkki palauttaa kaikki <span> elementtien kaikki isovanhemmat:

Esimerkki

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

Kokeile itse

Voit myös käyttää valinnaisia parametreja suodattaa isovanhempien hakua.

Seuraava esimerkki palauttaa kaikki <span> elementtien kaikki isovanhemmat, ja se on <ul> elementti:

Esimerkki

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

Kokeile itse

jQuery parentsUntil() metodi

parentsUntil() metodi palauttaa kaikki kaksi annettua elementtiä väliset isovanhemmat.

Seuraava esimerkki palauttaa kaikki <span> ja <div> elementtien väliset isovanhemmat:

Esimerkki

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

Kokeile itse

jQuery verkostokäyttö viittaus

Jos haluat tietää kaikki jQuery verkostokäyttömenetelmät, vieritse jQuery verkostokäyttö viittaus