Esercizio jQuery - Antenati

Gli ancestor sono il padre, il nonno o il bisnonno ecc.

Con jQuery, puoi esplorare l'albero DOM in senso ascendente per trovare gli ancestor degli elementi.

Esplorazione ascendente dell'albero DOM

Questi metodi jQuery sono molto utili, poiché vengono utilizzati per esplorare l'albero DOM in senso ascendente:

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

Metodo jQuery parent()

Il metodo parent() restituisce l'elemento padre diretto dell'elemento selezionato.

Questo metodo esplora solo il livello superiore dell'albero DOM.

Esempio seguente restituisce l'elemento padre diretto di ogni elemento <span>:

Esempio

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

Prova tu stesso

Metodo jQuery parents()

Il metodo parents() restituisce tutti gli ancestor degli elementi selezionati, salendo fino all'elemento radice del documento (<html>).

Esempio seguente restituisce tutti gli ancestor degli elementi <span>:

Esempio

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

Prova tu stesso

Puoi anche utilizzare un parametro opzionale per filtrare la ricerca sugli ancestor.

Esempio seguente restituisce tutti gli ancestor degli elementi <span> e che sono elementi <ul>:

Esempio

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

Prova tu stesso

Metodo jQuery parentsUntil()

Il metodo parentsUntil() restituisce tutti gli elementi ancestor tra due elementi dati.

Esempio seguente restituisce tutti gli elementi ancestor tra <span> e <div>:

Esempio

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

Prova tu stesso

Manuale di riferimento per l'iterazione jQuery

Per conoscere tutti i metodi di iterazione di jQuery, visita il nostro Manuale di riferimento per l'iterazione jQuery.