jQuery Traversing - Ancestros
Con jQuery puedes recorrer el árbol DOM para encontrar los ancestros de un elemento.
Un antepasado es un padre, un abuelo, un bisabuelo, etc.
Atravesando el árbol DOM
Tres métodos jQuery útiles para atravesar el árbol DOM son:
parent()parents()parentsUntil()
Método jQuery padre()
El parent()método devuelve el elemento padre directo del elemento seleccionado.
Este método solo atraviesa un solo nivel en el árbol DOM.
El siguiente ejemplo devuelve el elemento principal directo de cada <span>
elemento:
Ejemplo
$(document).ready(function(){
$("span").parent();
});
método jQuery padres()
El parents()método devuelve todos los elementos antecesores del elemento seleccionado, hasta el elemento raíz del documento ( <html>).
El siguiente ejemplo devuelve todos los ancestros de todos los
<span>elementos:
Ejemplo
$(document).ready(function(){
$("span").parents();
});
También puede utilizar un parámetro opcional para filtrar la búsqueda de antepasados.
El siguiente ejemplo devuelve todos los ancestros de todos los <span>elementos que son <ul>
elementos:
Ejemplo
$(document).ready(function(){
$("span").parents("ul");
});
método jQuery parentUntil()
El parentsUntil()método devuelve todos los elementos antecesores entre dos argumentos dados.
El siguiente ejemplo devuelve todos los elementos antecesores entre a <span>y un <div>elemento:
Ejemplo
$(document).ready(function(){
$("span").parentsUntil("div");
});
Ejercicios de jQuery
Referencia de cruce de jQuery
Para obtener una descripción general completa de todos los métodos de jQuery Traversing, vaya a nuestra Referencia de jQuery Traversing .