Utilizar jQuery each para recorrer una lista o array

24/Feb/2013 jQuery , 4 Comentarios

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:

  1. <script src="jquery-1.8.3.js"></script>

Si tenemos la siguiente lista ordenada en HTML:

  1. <li>Elemento 1</li>
  2. <li>Elemento 2</li>
  3. <li>Elemento 3</li>
  4. <li>Elemento 4</li>
  5. </ol>
  6.  

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:

  1. $('ol li').each(function(indice, elemento) {
  2. console.log('El elemento con el índice '+indice+' contiene '+$(elemento).text());
  3. });

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:

  1. var vectorPersonas = ['Elena', 'Isabel', 'Ana'];
  2.  
  3. $.each(vector, function (ind, elem) {
  4. console.log('¡Hola :'+elem+'!');
  5. });

Ahora ya sabemos recorrer listas con jQuery gracias a la función each.

Vídeos sobre jQuery


Difunde el Conocimiento

Si te ha gustado el artículo o te ha sido de utilidad, no dejes de compartirlo con tus amigos en las redes sociales... Te estaremos muy agradecidos. :-D

4 comentarios en “Utilizar jQuery each para recorrer una lista o array”

Carmen Rodrigo

Maycol

Hola amigos buenas tardes, quiero saber como listar fila por fila de un tabla en un arreglo de 5×5 , en jquery

Carmen Rodrigo

el correky

es cacota tu web

Carmen Rodrigo

Helio

Hola amigo,
He hecho una ARRAY con nombres de colores.
Ahora quiero que el jQuery me escriba en mi documento HTML cada color en un párrafo con un background de color del mismo nombre.
¿Cómo lo haría con EACH( )?
He aquí el código: http://codepen.io/colombe/pen/QENWmG
Gracias

Carmen Rodrigo

Berenes

Hola amigo. Yo tengo una serie de comentarios asociados a un post. En cada comentario se le puede dar a un botón para decir que te gusta el comentario. Estoy tratando de hacerlo con ajax por medio del método load de jquery. La cuestión es que los comentarios se muestran por medio de un foreach. De está manera cada comentario tiene un id diferenciado. Imaginemos que hay 5 comentarios cada uno de ellos dentro de un div class=”comentario”. El primero de ellos tiene id=1, el segundo id=2, el tercero id=3, asi con todos. Bien, si pulso el comentario con id= 3, ¿como puedo seleccionar el div con ese comentario?
$(function(){
$(‘.comentario’).load(data.php);
});

¿Algo que nos quieras comentar?

Déjanos tu comentario, no te preocupes que tu email no será publicado

*

*