Vamos a ver un ejemplo de la función jQuery each para recorrer una lista de elementos o un array Javascript. Es algo que se puede hacer de forma muy sencilla mediante este método que nos proporciona la librería.
Lo primero de todo no olvides incluir la librería jQuery:
Si tenemos la siguiente lista ordenada en HTML:
- Elemento 1
- Elemento 2
- Elemento 3
- Elemento 4
Haremos los siguientes pasos:
- Primero vamos a seleccionar la lista.
- Una vez seleccionada llamamos a la función jQuery each que nos recorre los elementos de la selección.
- Por cada elemento que seleccione jQuery each ejecuta la función que le pasamos como argumento. Dicha función tiene dos parámetros para dar acceso tanto al índice como al elemento seleccionado y realizamos su escritura por consola.
Veamos el código:
$('ol li').each(function(indice, elemento) {
console.log('El elemento con el índice '+indice+' contiene '+$(elemento).text());
});
Como ves:
- Hemos seleccionado la lista con $(‘ol li’).
- Llamamos a jQuery each.
- Por cada selección ejecuta la función que tiene acceso al índice y al elemento y lo imprimimos por consola.
- Date cuenta de que hemos aplicado a element la función text() para sacar su contenido.
Lo interesante es que la función jQuery each puede usarse directamente sobre $. En ese caso habrá que pasarle también como parámetro lista correspondiente de elementos seguida de la función tal como hacíamos en el ejemplo anterior. En el siguiente ejemplo lo vamos a usar para recorrer un vector de Javascript de personas y saludarlas. Veamos cómo quedaría:
var vectorPersonas = ['Elena', 'Isabel', 'Ana'];
$.each(vector, function (ind, elem) {
console.log('¡Hola :'+elem+'!');
});
Ahora ya sabemos recorrer listas con jQuery gracias a la función each.
