Jquery each() para recorrer elementos

En este artículo aprenderemos a utilizar jquery each()  para recorrer elementos y para comprobar si un checkbox está seleccionado, que es una de las aplicaciones más frecuentes cuando nos enfrentamos a determinadas aplicaciones.

Qué es jquery each()

Para comprenderlo podemos decir que jquery each() es una función que se utiliza para recorrer elementos de un mismo tipo y ejecutar una determinada acción para cada uno de ellos. Por ejemplo imaginad que tenemos un listado del tipo <ul> con varios <li> y queremos ejecutar una acción por cada elemento <li>

Sintaxis de jquery each()

Aunque mi recomendación es la de visitar la web oficial para ver el funcionamiento y sintaxis de esta y de cualquier otra función, vamos a traducirla a un lenguaje más sencillo de entender:

Repasamos dicha sintaxis:

  •  Selector: Siempre es obligatorio, tenemos que especificar qué elementos del dom queremos recorrer.
  • Índice
  • Elemento: Es el elemento actual dentro de nuestro recorrido

Algunas aplicaciones habituales jquery each()

Al igual que el bucle foreach sirve para recorrer arrays en php principalmente, la función each de jquery suele utilizarse para los siguientes casos:

  • Recorrer elementos de una lista ordenada o desordenada y ejecutar una acción por cada uno de ellos.
  • Recorrer elementos de una tabla.
  • Recorrer y comprobar checkbox seleccionados en un formulario.
  • Para recorrer un Array.
  • Recorrer un Array de Objetos.
  • Para recorrer complejos datos en JSON

1-  jquery each() para recorrer una lista de elementos

Supongamos que disponemos de un listado de elementos en nuestro html, y queremos recorrerlo, en nuestro caso, una pequeña lista de la compra:

html

Estos son los pasos que vamos a realizar:

  1. Primero vamos a seleccionar la lista <ul> que contiene todos los elementos de la compra <li> que queremos recorrer y le aplicaremos el each. $(ul li).each()
  2. Una vez hecho esto nos guardaremos cada uno de estos elementos en una variable, para ello recurrimos al $(this) y cuya función será almacenar cada uno de los elementos
  3. Finalmente mostraremos en pantalla todo lo que vaya recorriendo nuestro each.

 jquery

No olvidarse de incluir el archivo jquery.min,js o el que cada uno tenga para su caso.

El resultado que se mostrará en pantalla será el siguiente:

Ver el resultado del ejemplo

2- Jquery each para recorrer un array

Vamos con otro ejemplo de aplicación de la función jquery each(), en este caso para recorrer un array de elementos. Crearemos un array de índice numérico con los días de la semana, de forma que nuestro jquery each, recorrerá cada uno de los elementos del array acompañado de su índice:

Explicación del código:

  1. Primero hemos guardado en un array de índice numérico los días de la semana.
  2. Después hemos utilizado $.each con una función con 2 parámetros aplicados al array semana $.each(semana, function (indice, valor) {
  3. Finalmente lo mostramos en pantalla con el document.write.

Ver el resultado del ejemplo

3- Jquery each para recorrer una tabla html

Turno de las tablas en html. Jquery each() también puede utilizarse para recorrer, mostrar y ejecutar alguna acción sobre tablas html, veamos un ejemplo sencillo.

El script:

 

Explicación del código:

  1. En este caso tenemos una tabla html como si fuese de una base de datos cuyos campos serán el id, nombre y apellido. Crearemos un botón para que se ejecute una acción al presionar sobre el mismo
  2. Le diremos a nuestro script lo siguiente: Cuando hagamos click sobre el botón con el id “#boton”, coge cada elemento “td” de la tabla y recórrelo con la función each.
  3. Finalmente este each mostrará en la consola lo que vaya recorriendo en cada caso con this.text.

Ver el resultado del ejemplo

4- Jquery each para comprobar qué checkbox está seleccionado

Veamos con un ejemplo otra aplicación posible del jquery each(). Llega el turno de los checkbox, un clásico de los formularios en html. Los checkboxes permiten ofrecer al usuario un listado de elementos para poder seleccionar. Cuando enviamos el formulario, los checkboxes se guardan como un array con los valores de los checkbox marcados.

Comprobar qué checkbox están marcados en un array con jQuery each() es muy sencillo. Simplemente debemos recorrer todos los input que tengan el nombre (o la clase) que nosotros le hemos asignado en el HTML. Aunque dedicaré un artículo exclusivamente a este apartado, veamos un ejemplo:

Obtener todos los checkbox seleccionados:

Podemos utilizar el pseudo-selector “checked”. De esta manera obtendríamos los elementos seleccionados de nuestro checkbox, en este caso de categoría, y lo mostraríamos en pantalla

 

Capturar el evento de selección del checkbox:

En este caso lo que pretendemos hacer es que pase algo cuando el checkbox esté seleccionado, para lo cual podemos hacer uso del elemento click, veamos un ejemplo:

 

Uno de los artículos que recomiendo para comprobar si un checkbox está seleccionado es el de Cybemeta

Otro artículo recomendable aunque en inglés en el que se puede observar unos cuantos ejemplos de uso del each de jquery http://www.jquery-az.com/jquery-each-method-6-examples-different-collections/

Conclusión

Hemos visto algunas de las posibles aplicaciones que podemos otorgarle a jquery each() y seguramente habrá muchos más, pero en resumen diría que es un recurso muy útil para todo lo relacionado con recorrer elementos de html, como si se tratara de un bucle recorre elementos.

Summary
jquery each () para recorrer elementos html
Artículo
jquery each () para recorrer elementos html
Descripción
Explicación de la sintaxis y aplicaciones del elemento jquery each
Autor
Si te sirve de ayuda, no dudes en compartir!Share on LinkedInShare on FacebookTweet about this on TwitterPin on PinterestShare on Google+

Deja un comentario