3.6. Recorrer el DOM (Fundamentos de jQuery)

Una vez obtenida la selección, es posible encontrar otros elementos utilizando a la misma selección. En api.jquery.com/category/traversing puede encontrar una completa documentación sobre los métodos de recorrido de DOM (en inglés traversing) que posee jQuery.

Nota Debe ser cuidadoso en recorrer largas distancias en un documento — recorridos complejos obligan que la estructura del documento sea siempre la misma, algo que es difícil de garantizar. Uno o dos pasos para el recorrido esta bien, pero generalmente hay que evitar atravesar desde un contenedor a otro.

Moverse a través del DOM utilizando métodos de recorrido

// seleccionar el inmediato y próximo elemento <p> con respecto a H1
$('h1').next('p');

// seleccionar el elemento contenedor a un div visible
$('div:visible').parent();

// seleccionar el elemento <form> más cercano a un input
$('input[name=first_name]').closest('form');

// seleccionar todos los elementos hijos de #myList
$('#myList').children();

// seleccionar todos los items hermanos del elemento <li>
$('li.selected').siblings();

También es posible interactuar con la selección utilizando el método $.fn.each. Dicho método interactúa con todos los elementos obtenidos en la selección y ejecuta una función por cada uno. La función recibe como argumento el índice del elemento actual y al mismo elemento. De forma predeterminada, dentro de la función, se puede hacer referencia al elemento DOM a través de la declaración this.

Interactuar en una selección

$('#myList li').each(function(idx, el) {
    console.log(
        'El elemento ' + idx +
        'contiene el siguiente HTML: ' +
        $(el).html()
); });