Manejar elementos de una selección con la función each()

jQuery

Unas de las particularidades de jQuery es que la mayoría de las funciones integran un bucle automático para cada elemento de la selección. Ese bucle consise en una función each() integrada que va recorriendo cada elemento. Por ejemplo para cada imagen desaparezca con un fade out

JavaScript
1
$('img').fadeOut();

Los elemento desaparecen lentamente y cuando la selección implica varias elementos, la función realiza un bucle a través de la selección y hace desaparecer cada elemento. Es muy similar a la función foreach de PHP.

Para usar la función each() basta con seguir este patrón:

JavaScript
1
$('selector').each();

Funciones anónimas

Para poder usar each(), hay que pasar como argumento una función anónima. Simplemente contiene los pasos que deseas realizar para cada elemento. Es anónimo ya que no tiene nombre y se usa donde es declarada.

Un ejemplo de estructura de una función anónima:

JavaScript
1
2
3
function() {
   //Código
}

Lo curioso es que necesitas una función anónima para pasarla como para parámetro de otra función como si se tratase de una matroska. Para incorporarla al each() se realizaría lo siguiente:

JavaScript
1
2
3
$('selector').each(function() {
  // Código
});

Voy a desmenuzarlo un poco

JavaScript
1
2
3
4
5
6
7
8
9
10
11
$('selector').each(//Comienzo del each
 
   function() //Función anónima
 
  {//Comienzo de la función anónima
 
  }//Fin de la función anónima
 
  )//Fin de la función each()
 
  ;//Fin de la declaración

Ahora vamos a probar un ejemplo. En este caso se producirá un mensaje por cada párrafo que vaya seleccionando en el documento.

JavaScript
1
2
3
$('p').each(function() {
   alert('Encontré un párrafo');
});

Uso de this y $(this)

Si has programado en java eso te resultará familiar. Cuando se usa la función each() es probable que quieras acceder a los atributos de cada elemento. Para hacer referencia al elemento presente en cada bucle se emplea this. La keyword this se refiere a cualquier elemento que esté llamando la función anónima. La primera vez que pase el bucle, this será el primer elemento de la selección jQuery, la segunda vez que pase this será el segundo elemento y así sucesivamente.

Sin embargo, es preciso que te refieras a this como una selección jQuery, $(this).

Voy a mostrar un ejemplo para enseñar cómo funciona. Supongamos que hay 3 enlaces.

JavaScript
1
2
3
4
5
6
7
<a href="www.google.es">Google</a>
 
<a href="https://guidacode.com/">Guidacode</a>
 
<a href="https://www.facebook.com/">Facebook</a>
 
<ul id="enlaces"></ul>

Y sólo quiero seleccionar aquellos que comiencen por http://. Comenzaría por el selector

JavaScript
1
$('a[href^="http://"]')

Añado la función each()

JavaScript
1
$('a[href^="http://"]').each();

Y dentro de la función meto la función anónima

JavaScript
1
2
3
$('a[href^="http://"]').each(function() {
 
});

Ahora dentro de la función anónima haré que coja el atributo href de cada enlace.

JavaScript
1
2
3
$('a[href^=http://]').each(function() {
   var extLink = $(this).attr('href');
});

Como puedes ver, $(this) funciona como cualquier otro selector. La variable extLink tiene la URL de cada enlace que imprimiré dentro de la lista «enlaces».

JavaScript
1
2
3
4
$('a[href^=http://]').each(function() {
   var extLink = $(this).attr('href');
   $('#enlaces').append('<li>' + extLink + '</li>');
});

Si quieres saber cómo usar append te recomiendo este post.

Y hasta aquí la función each(), espero que le saquéis partido. A seguir picando 🙂