Core/each: each del core de jQuery

  • Por
Conozcamos con detalle el método each del core de jQuery, para ejecutar una función en cada uno de los elementos de un grupo.
Hay algo que tenemos que tener en cuenta, en la medida de lo posible, cuando creamos código Javascript: crear un código de calidad y lo más corto posible. Para ello también nos facilitan mucho las cosas los frameworks y métodos como each(), que veremos en este artículo.

El método each() pertenece al juego de funciones del CORE de jQuery, cuyas particularidades ya comenzamos a analizar en el manual de jQuery. Se trata de un método para realizar acciones con todos los elementos que concuerdan con una selección realizada con la función jQuery -también llamada función $()-. Útil porque nos da una manera cómoda de iterar con elementos de la página y hacer cosas con ellos más o menos complejas de una manera rápida y sin utilizar mucho código para definir el bucle.

Cómo funciona each

Each es un método que se utiliza sobre un conjunto de elementos que hayamos seleccionado con la función jQuery. Con each realizamos una iteración por todos los elementos del DOM que se hayan seleccionado.

El método each recibe una función que es la que se tiene que ejecutar para cada elemento y dentro de esa función con la variable "this" tenemos una referencia a ese elemento del DOM. Adicionalmente, la función que se envía a each, puede recibir un parámetro que es el índice actual sobre el que se está iterando.

Quiero explicar las bondades de each() con un ejemplo. Por ejemplo, veamos esta línea de código:

$("p").css("background-color", "#eee");

Como ya sabemos, con $("p") seleccionamos todos los párrafos de la página. Luego con el método CSS asignamos un estilo, en este caso para cambiar el color del fondo. Esto en realidad jQuery lo hace con una iteración con todos los párrafos de la página, sin que tengamos que hacer nosotros nada más y es genial que se permita en el uso del framework. ¿Pero qué pasa si queremos cambiar el fondo de los párrafos utilizando colores alternos?

En este caso no podemos hacerlo en una sola línea de código, pero each nos vendrá como anillo al dedo.

Imaginemos que tenemos una serie de párrafos en la página y queremos cambiar el color de fondo a los mismos, de manera que tengan colores alternos, para hacer dinámicamente un típico diseño para los listados.

Entonces podríamos hacer lo siguiente:

$("p").each(function(i){
   if(i%2==0){
      $(this).css("background-color", "#eee");
   }else{
      $(this).css("background-color", "#ccc");
   }
});

Con $("p") tengo todos los párrafos. Ahora con each puedo recorrerlos uno a uno. Para cada uno ejecutaremos la función que enviamos como parámetro a each(). En esa función recibo como parámetro una variable "i" que contiene el índice actual sobre el que estoy iterando.

Con if(i%2==0) estoy viendo si el entero del índice "i" es par o impar. Siendo par coloco un color de fondo al elemento y siendo impar coloco otro color de fondo.

Como se puede ver, con la variable "this" tenemos acceso al elemento actual. Pero OJO, que este elemento no es un objeto jQuery, así que no podríamos enviarle métodos del framework jQuery hasta que no lo expandamos con la función jQuery. Así pues, tenemos que hacer $(this) para poder invocar al método css(). Por si no queda claro este punto mirar las diferencias entre estas dos líneas de código:

this.css("background-color", "#ccc");
$(this).css("background-color", "#ccc");

En la primera línea no estaríamos extendiendo la variable this con las funcionalidades de jQuery, luego no funcionaría.

En la segunda línea, que es la que habíamos utilizado en el script de ejemplo, sí estamos extendiendo la variable "this" con la función jQuery. De ese modo, se puede invocar a cualquier método de jQuery sobre los elementos.

Podemos ver un ejemplo en marcha que hace uso de ese script.

Este sería su código fuente completo:

<html>
<head>
   <title>each del core de jQuery</title>
   <script src="../jquery-1.3.2.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
   $("p").each(function(i){
      if(i%2==0){
         $(this).css("background-color", "#eee");
      }else{
         $(this).css("background-color", "#ccc");
      }
   });
});
</script>
</head>
<body>
<p>Primer párrafo</p>
<p>Otro párrafo</p>
<p>Tecer párrafo</p>
<p>Uno más</p>
<p>y acabo...</p>
</body>
</html>

Retornando valores en la función que enviamos a each

Ahora vamos a ver un par de posibilidades interesantes al utilizar each. Resulta que la función que enviamos como parámetro a each() puede devolver valores y dependiendo de éstos, conseguir comportamientos parecidos a los conocidos break o continue de los bucles Javascript.

Si la función devuelve "false", se consigue detener por completo el proceso de iteraciones de each(). Esto es como si hiciéramos el típico "break".

Si la función devuelve "true", se consigue pasar directamente a la próxima iteración del bucle. Es como hacer el típico "continue".

Para ver estos dos casos realizaremos otro ejemplo de uso de each.

Tenemos varios DIV, donde cada uno tiene un texto.

<div>red</div>
<div>blue</div>
<div>red</div>
<div>white</div>
<div>red</div>
<div>green</div>
<div>orange</div>
<div>red</div>
<div>nada</div>
<div>red</div>
<div>blue</div>

Ahora queremos hacer un recorrido a esos DIV y en cada uno, mirar el texto que aparece. Entonces colocaremos como color del texto del DIV el color que aprece escrito en el DIV. Pero con dos casos especiales:

  • Si el texto del DIV es "white", entonces no queremos hacer nada con ese elemento.
  • Si el texto del DIV es "nada", entonces detendremos el bucle y dejaremos de colorear los siguientes elementos.

Esto lo podríamos hacer con el siguiente código:

$("div").each(function(i){
   elemento = $(this);
   if(elemento.html() == "white")
      return true;
   if(elemento.html() == "nada")
      return false;
   elemento.css("color", elemento.html());
});

Ahora podremos ver este ejemplo en funcionamiento en una página aparte.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

Leo

01/8/2009
JQuery
Este manual esta buenisimo, lo voy siguiendo paso a paso desde que empezaron a publicarlo, y esta increible. FELICIDADES!!
Además de este extraordinario manual de JQuery que estan creando quisiera comentar que Desarrolloweb.com es la mejor pagina que existe. aqui se encuentra todo lo que uno puede buscar. Gracias y nuevamente Felicidades!! por la página.
Saludos.

manuel_zapata-627807

17/8/2009
Felicitaciones
Hola amigos, solo quiero felicitarles por el excelente manual que realizaron.
Yo no tenia ni idea de como comenzar con jQuery y aquí encontré un excelente comienzo. Sigan publicando manuales tan claros y sencillos como este. GRACIAS!!!

beni0888

24/2/2010
Capturar valor devuelto por la función
Hola! en primer lugar felicitarles por la página ya que considero que es la mejor ayuda que se pueden encotrar los desarrolladores hoy en día, la verdad es que no se qué sería de mi sin vosotros ;-p. Mi duda es la siguiente, me gustaría saber si sería posible capturar el valor devuelto por la función que le pasamos a each, por ejemplo si estuviesemos recorriendo los campos de un formulario para validarlo y en el momento que encontrásemos un campo requerido vacío la función del each devolviese false (o cualquier otro valor), ¿podríamos evaluar el valor devuelto por la función para que la función que realiza la validación del formulario actuase en consecuencia?.
Muchas gracias por su ayuda.
Saludos

Anonimo

30/6/2011
El bucle each de jquery es absurdo
Hemos creado aplicaciones con ese bucle en el trabajo, al final lo hemos quitado, aparte de que es mas lento que un bucle for normal js, no aporta nada, solo complejidad, ralentizacion y dependencia de una libreria, es absurdo que para hacer un bucle sea necesario tener que estudiarse una libreria. Es mi opinion. Saludos!

Martin

22/11/2011
Duda
Hola, no se como utilizar correctamente la función, tengo multiples spans con una misma clase y solo quiero obtener el contenido del segundo span.

<html>
<head>
</head>
<body>
<span class="miclass">esto no me interesa</span>
<span class="miclass">esto si que me interesa</span>
<span class="miclass">esto no me interesa</span>
</body>
</html>

lo idea sería una variable con el contenido. Muchas gracias.

erickbuzz

16/1/2012
excelente
hasta ahora todo muy bien, el core de jquerry da para mucho me he dado cuenta, nuestra imaginación y lógica es lo hacen magnifico.

Excellsus

10/2/2012
Manuel jQuery...
EXCELENTE, como todo lo que publicvan en desarrolloweb.com..

Gracias, y muchas felicidades

Federico
Chihuahua, Chih.
México

kruonx

20/6/2012
enhorabuena
Un manual muy claro, sencillo de seguir desde el principio y en español. No se puede pedir más.

spartan

10/3/2015
consulta
supongamos que tenemos varios elementos li con una clase llamada categorias dentro de un ul y quiero que al hacer click sobre cualquier li me lo detecte con el metodo each. todo esto es para pasar el contenido de cada li a otro elemento con jquery