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

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

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:

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:

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:

Voy a desmenuzarlo un poco

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

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.

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

Añado la función each()

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

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

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”.

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 🙂