jquery each ejemplos

La función each de jQuery

La función each de jQuery nos sirve para iterar uno por uno los elementos de una colección, usualmente estos son el resultado de un selector jQuery, pero también pueden ser otras colecciones de Javascript como un array o un objeto.

La forma de la función es:

      jQuery.each( coleccion, callback(indiceEnElArray, valorDelElemento) )
    

Para entender su funcionamiento lo mejor es ver algunos ejemplos de su uso.

Utilizando jQuery.each con un array

      $.each([1,2,3],function(indice,valor) {
        log('Indice es ' + indice + ' y valor es: ' + valor);
      });
    

La función pasada como argumento se ejecutará tantas veces como elementos tenga el array, además en cada ejecución recibirá como argumentos el índice del elemento sobre el cual está ejecutando y el elemento mismo (en nuestro código llamado valor).

Utilizando jQuery.each con un objeto

      var objeto = {'ojos': 'rojos', 'pelo': 'castaño', 'mirada': 'enigmatica' };
      $.each(objeto,function(clave,valor) {
        log('Clave es ' + clave + ' y valor es: ' + valor);
      });
    

En este caso hicimos algo parecido, pero al tratarse de un objeto tiene más sentido llamar a indice como clave en el nombre de parametro de la función que se pasa como argumento.

Utilizando jQuery.each con una colección del DOM

Este es quizá el uso más común de each, y es cuando lo utilizamos con una colección de elementos de jQuery. En este caso podemos utilizar una sintáxis más cómoda omitiendo el primer argumento de each, ya que ejecutaremos each como método de la colección:

• un li
• otro li

      $('li.example').each(function(indice,valor) {
         log(indice,valor);
         $(valor).html('Soy el li número: ' + indice + ' del DOM.');
      });  
    

Esta vez operamos sobre todos los li del documento html, y reemplazamos el contenido por un texto específico en cada caso.