Recorrido jQuery - Antepasados

Con jQuery, podemos recorrer fácilmente el árbol DOM para encontrar los antepasados de un elemento.

Los antepasados son padres, abuelos, bisabuelos, etc.

En este capítulo, explicaremos cómo recorrer el árbol DOM.

Recorrer el árbol DOM

Tenemos los siguientes métodos jQuery para recorrer el árbol DOM:

• parent()

• parents()

• parentsUntil()

En este capítulo, le mostraremos cómo usar cada método.

Método jQuery parent()

jQuery parent()El método devuelve el elemento padre directo del elemento seleccionado.

Este método solo se mueve un nivel hacia arriba en el árbol DOM.

El siguiente ejemplo devuelve el elemento padre directo del elemento SPAN:

También puede usar parámetros opcionales para filtrar la búsqueda del elemento padre.

El siguiente ejemplo devuelve el elemento padre directo que tiene la clase "selected":

$(document).ready(function() {
　　$("p").parent(".selected").css("background", "coral");
});

Método parents() de jQuery

jQuery parents()El método devuelve todos los elementos ancestros del elemento seleccionado.

Este método realiza una búsqueda ascendente desde el elemento padre hasta el elemento raíz del DOM (html).

El siguiente ejemplo devuelve todos los elementos ancestros del elemento SPAN:

Método ParentUntil() de jQuery

jQuery parentsUntil()El método devuelve todos los elementos ancestros entre dos parámetros dados.

El siguiente ejemplo devuelve todos los elementos ancestros entre el elemento SPAN y el elemento BODY:

Referencia de búsqueda de jQuery

Para obtener una referencia completa de los métodos de búsqueda, visite nuestroReferencia de búsqueda de jQuery.