"El diseño es el embajador silencioso de tu marca"
- Paul Brand

Iterar con jQuery each

Una de las operaciones que un desarrollador repite frecuentemente es la de iterar sobre una colección de elementos, hoy veremos como iterar con jQuery each, el método que la famosa librería de Javascript pone a nuestra disposición.

Si es la primera vez que escuchas el término iterar, significa el acto de repetir un proceso con la intención de alcanzar una meta deseada, todos los lenguajes tienen sus métodos de iteración, de hecho el propio lenguaje Javascript nos permite usar para los array un método llamado forEach que sirve para esto.

Sin embargo en navegadores muy antiguos este método no está implementado (como no IE8 e inferiores), y además el método de jQuery each permite hacer más cosas, vamos a ver cuales…

En primer lugar y como tengo por costumbre siempre os dejo un link a la documentación oficial.

Como se indica en la propia página .each( function ) es un método que ejecuta una función la cual tiene dos parámetros Function( Integer index, Element element ), cuando nosotros la declaramos podemos llamar a estos parámetros como queramos, solo tenemos que tener en cuenta que el primero es el índice (index) que nos indica el número de elemento que está recorriendo, y el segundo es el propio elemento que nos lo da porque lo lógico es que hagamos algo con él.

Veamos un caso práctico, pongamos por caso que tenemos un listado como este.

Podriamos manipular los elementos para numerarlos y alternar entre mayúsculas y minúsculas de estás dos maneras.

En esta primera estamos utilizando el parámetro element para operar, pero podemos hacer esto.

Como vemos la palabra this apunta al propio elemento pues la función se ejecuta en ese contexto, ¿que manera es mejor?, la respuesta es ambas si sabes lo que haces, usando this te ahorras declarar el segundo parámetro pero ten en cuenta que podemos manipular su valor o puede cambiar, por lo que mi recomendación es que lo uses para casos sencillos como este que acabamos de ver.

En el caso de que lo que estemos buscando sea iterar sobre un array no sobre los elementos del DOM, tenemos una función genérica que viene a hacer lo mismo que el forEach nativo del que hablamos antes.

Os vuelvo a dejar la página en este link para que lo consulteis.

Aquí dice que jQuery.each( array/object, callback ) puede iterar tanto sobre un array como sobre un objeto, por eso se define a si misma como una función genérica de iteraración.

El primer parámetro es un el array o el objeto sobre el cual queremos iterar, y el segundo es una función de callback que a su vez tiene otros dos parametros.
Estos parametros de la función de callback son:

  • Si se trata de un Array, Function( Integer indexInArray, Object value ), el índice y el valor.
  • Si se trata de un Objeto, Function( String propertyName, Object valueOfProperty ), el nombre de la propiedad y el valor.

Veamos como se usa en ambos casos, en primer lugar iteramos sobre un Array…

Y ahora iterando sobre un Objeto…

Como vemos con jQuery each podemos iterar sobre diversos tipos de colecciones, las posibilidades que nos ofrece son infinitas y por ello seguro que le daremos buen uso.

The following two tabs change content below.
Especialista en diseño web responsive, programador html5, css3, jquery, php y java.

Latest posts by Óscar Lijó (see all)