Iteración por los elementos (each)

La funcionalidad de each() en jQuery, es la de recorrer los elementos de un mismo tipo y a su vez ejecutar una acción por cada uno de ellos.

Método each()

El método each() especifica una función que se ejecutará para cada elemento coincidente.
Consejo: return false se puede utilizar para detener el ciclo antes de tiempo.

Sintaxis

$(selector).each(function(index,element));

Repasamos la sintaxis:

  • selector (Obligatorio): Tipo de dato a encontrar para recorrer.
  • index: El número de ocurrencia del elemento, es decir, durante el recorrido de elementos el número de elemento encontrado.
  • element: Elemento actual dentro del recuento/recorrido. Se puede usar ‘this

El ejemplo realiza un alerta al texto de cada elemento <li>:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>

$(document).ready(function(){
  $("button").click(function(){
    $("li").each(function(){
      alert($(this).text())
    });
  });
});
</script>
</head>
<body>
<button>Realiza un alert en cada item de la lista</button>

<ul>
  <li>Uno</li>
  <li>Dos</li>
  <li>Tres</li>
 <li>Cuatro</li>
</ul>

</body>
</html>

Ver ejemplo anterior

En el ejemplo anterior usamos las función each

  • Usamos la función each() para recorrer cada elemento li de una lista .
  • Posteriormente mostramos un alert por pantalla sacando con la función attr() el contenido del id de cada elemento de dicha lista.