Artículos
jQuery

Utilizar jQuery each para recorrer una lista o array

24/Feb/2013

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:

  1. Elemento 1
  2. Elemento 2
  3. Elemento 3
  4. Elemento 4

Haremos los siguientes pasos:

  1. Primero vamos a seleccionar la lista.
  2. Una vez seleccionada llamamos a la función jQuery each que nos recorre los elementos de la selección.
  3. 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.

Código Fuente

Descárgate el código fuente de Utilizar jQuery each para recorrer una lista o array
Y si te ha gustado nuestro código fuente puedes regalarnos una estrella Star
Suscribir
Notificar de
guest
9 Comentarios
Recientes
Anteriores Más votados
Opiniones integradas
Ver todos los comentarios