Los últimos tutoriales de desarrollo web
 

jQuery Atravesando - Descendientes


Un descendiente es un niño, nieto, bisnieto, y así sucesivamente.

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


Recorriendo el árbol DOM

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

  • children()
  • find()

jQuery children() Método

La children() método devuelve todos los hijos directos del elemento seleccionado.

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

El ejemplo siguiente devuelve todos los elementos que son hijos directos de cada uno <div> elementos:

Ejemplo

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

También puede utilizar un parámetro opcional para filtrar la búsqueda de los niños.

El ejemplo siguiente devuelve todos los <p> elementos con el nombre de la clase "first" , que son hijos directos de <div> :

Ejemplo

$(document).ready(function(){
    $("div").children("p.first");
});
Inténtalo tú mismo "

jQuery find() Método

Los find() devuelve el método de elementos descendientes del elemento seleccionado, todo el camino hasta el último descendiente.

El ejemplo siguiente devuelve todos los <span> elementos que son descendientes de <div> :

Ejemplo

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

El ejemplo siguiente devuelve todos los descendientes de <div> :

Ejemplo

$(document).ready(function(){
    $("div").find("*");
});
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 .