Programación y ejemplos de PHP, jQuery, HTML5, WordPress, MySQL, AMP y htaccess


jQuery each(): Recorrer elementos del DOM

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

La función en PHP equivalente es foreach(). Otras post de jQuery interesantes son:

Sintaxis de jQuery each()

Veamos la sintaxis de esta función extraída de su web oficial:

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

Ejemplo de jQuery each() para recorrer una lista

Vayamos con el primer ejemplo de each() para recorrer listas de un mismo id:

Os explico el ejemplo:

  • Detectamos el click en el botón con id=’boton’.
  • Usamos la función each() para recorrer cada elemento li de una lista con id=’listas’.
  • Posteriormente mostramos un alert por pantalla sacando con la función text() el contenido de dicha lista.

El código HTML de la lista del ejemplo es el siguiente

Ejemplo de jQuery each() con selectores hijo

Vayamos con el otro ejemplo de jQuery each() para recorrer listas con selectores hijo:

Os explico el ejemplo:

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

El código HTML de la lista del ejemplo es el siguiente

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.

ACEPTAR
Aviso de cookies