Los últimos tutoriales de desarrollo web
 

jQuery Atravesando - Ancestros


Un antepasado es un padre, abuelo, bisabuelo, y así sucesivamente.

Con jQuery se puede recorrer el árbol DOM para encontrar ancestros de un elemento.


Recorriendo el árbol DOM

Tres métodos jQuery útiles para recorrer el árbol DOM son:

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

jQuery parent() Método

El parent() método devuelve el elemento de matriz directa del elemento seleccionado.

Este método sólo atravesar un solo nivel en el árbol DOM.

El ejemplo siguiente devuelve el elemento de matriz directa de cada <span> elementos:

Ejemplo

$(document).ready(function(){
    $("span").parent();
});
Inténtalo tú mismo "

jQuery parents() Método

El parents() método devuelve todos los elementos antecesores del elemento seleccionado, todo el camino hasta el elemento raíz del documento (<html>) .

El ejemplo siguiente devuelve todos los antepasados de todos los <span> elementos:

Ejemplo

$(document).ready(function(){
    $("span").parents();
});
Inténtalo tú mismo "

También puede utilizar un parámetro opcional para filtrar la búsqueda de antepasados.

El ejemplo siguiente devuelve todos los ancestros de toda la <span> elementos que son <ul> elementos:

Ejemplo

$(document).ready(function(){
    $("span").parents("ul");
});
Inténtalo tú mismo "

jQuery parentsUntil() Método

El parentsUntil() método devuelve todos los elementos antecesores entre dos argumentos dados.

El ejemplo siguiente devuelve todos los elementos antecesores entre un <span> y un <div> elemento:

Ejemplo

$(document).ready(function(){
    $("span").parentsUntil("div");
});
Inténtalo tú mismo "

Ponte a prueba con los ejercicios!

Ejercicio 1 » Ejercicio 2» Ejercicio 3 » Ejercicio 4»


jQuery desplazamiento de referencia

Para una visión completa de todos los métodos de jQuery que atraviesan, por favor vaya a nuestra jQuery desplazamiento de referencia .