JQuery: Recorrer el DOM a partir de una selección

Como seguro ya sabes, uno de los usos principales de la librería JQuery es acceder de manera más cómoda a los elementos HTML de la página. En este post vamos a hablar de algunos de los métodos que nos ofrece para simplificar esta tarea.

Si ya has usado JQuery, estarás más que acostumbrado a utilizar los selectores simples que nos ofrece, parecidos a los que usamos en nuestras hojas de estilos, aunque tienen más potencia incluso que estos.

Es una buena práctica prefijar el caracter $ a nuestras variables de JQuery.

En algunas ocasiones, tenemos un elemento HTML ya seleccionado con esta librería y deseamos seleccionar otro relativo a este, que por algún motivo no podemos buscar con un selector en todo el documento, porque no hay manera de identificarlo inequívocamente si no es a partir del que ya tenemos, o simplemente queremos hacerlo así por mera comodidad. Para estos casos JQuery nos ofrece varios métodos que permiten recorrer el DOM de esta forma.

Veremos ejemplos simples en los que podemos usar estos métodos, aunque en la mayoría de ellos no es estrictamente necesario. No queremos complicar los ejemplos usando eventos donde si podría ser interesante usarlos, sino que la idea es solamente mostrar cómo funcionan.

  1. children()
  2. closest()
  3. find()
  4. next()
  5. prev()
  6. parent()
  7. siblings()

children()

Partimos de este DOM:

Imaginad que queremos conseguir todos los <li> pero ya tenemos seleccionado con anterioridad el elemento <ul id=”list”>. Pues es muy simple, solamente tendremos que llamar al método children() a partir del elemento seleccionado, y nos devolverá a todos sus hijos junto a todo lo que contengan.

Recuerda siempre esperar a que el DOM esté cargado antes de usar selectores. Ver ready().

closest()

Tenemos también este método que nos permite buscar hacia arriba en el árbol elementos que concuerden con el selector enviado. Partiendo de esta estructura:

Tenemos seleccionado el elemento <a id=”link”> y deseamos seleccionar el primer elemento padre <div>. Para ello invocamos al método closest pasándole el nombre del elemento:

Y nos devolverá el elemento #div2 ya que se parará en el primer resultado y no alcanzará a #div1. También hay que tener en cuenta la siguiente particularidad: este método contempla en la búsqueda al propio elemento sobre el que se ejecuta. Es decir, si pasamos como selector ‘a’, el resultado sería el mismo elemento #link.

find()

En algunas ocasiones queremos realizar una búsqueda mediante un selector pero teniendo en cuenta solo los descendientes de un elemento que tenemos seleccionado y no todo el árbol. Por lo tanto este método se ejecuta sobre un elemento y admite como parámetro cualquier selector válido.

Si tenemos almacenada la lista #li2, podemos obtener solo los elementos <li> que contiene enviando este selector:

next()

Se utiliza sobre un elemento o conjunto de elementos JQuery. Este método recoge para cada el elemento el primer hermano que encuentra a continuación. Se entiende mejor con el ejemplo:

Imaginad que tenemos seleccionados los elementos <div> pero queremos modificar los textos de los elementos <p> que se encuentran cada uno a continuación de cada div. Para ello, sobre la colección de divs que tenemos, ejecutamos este método y recogeremos todos los <p> :

Este método también acepta un selector, por si queremos que solo afecte a determinados elementos y filtrar así el resultado.

prev()

Funciona justo a la inversa que next(). Si con este recogíamos los elementos que se encontraban después, con prev() recogemos justo los que se encuentran antes. Siguiendo con el ejemplo anterior, podríamos alterar los <div> a partir de los <p> que ya tendríamos seleccionados.

parent()

Este es parecido al método closest() que explicamos anteriormente, pero es más simple, ya que solo busca en el nivel inmediatamente superior. Devuelve el elemento padre de cada uno de los elementos que se encuentran en el objeto JQuery sobre el que se utiliza. Si queremos filtar solo a algunos padres, este método nos permite también enviarle un selector.

Con el siguiente código, cambiaríamos solo el color del segundo span, ya que el primero no cumple el selector:

siblings()

Este método nos devuelve todos los hermanos de un elemento, sin incluir el objeto sobre el que se ejecuta.

Con este código establecemos el fondo rojo a todos los elementos menos el que tiene la clase third:


Estos son los principales métodos para poder utilizar selectores relativos. Si quieres ampliar la información sobre estos o consultar alguno que no haya comentado aquí, puedes verlos en la siguiente página de la documentación oficial de JQuery: Tree Traversal.