Recorrer elementos con jQuery

Recorrer elementos con jQuery

Recorrer elementos con jQuery

En este tutorial aprenderemos cómo podemos recorrer (iterar) elementos del DOM del mismo tipo con el método each().

Si no tienes todavía enlazado jQuery en tu proyecto puedes seguir nuestro tutorial Enlazar proyecto con jQuery.

Método each()

Éste método funciona como un bucle foreach y nos permite iterar elementos del DOM.

Su uso es muy sencillo. Veamos un ejemplo. Una página web con varios párrafos

<body>
  <p>Párrafo 1</p>
  <p>Párrafo 2</p>
  <p>Párrafo 3</p>
  <p>Párrafo 4</p>
</body>

La página se vería así

Ejemplo página web con párrafos
Ejemplo párrafos

Recorrer elementos del mismo tipo

Con jQuery podemos recorrer todos los elementos del mismo tipo en un bucle each.

<script>
  //Seleccionamos los elementos p y creamos el bucle each
  $("p").each(function(indice,elemento){
    //En cada elemento p escribimos el texto
    $(elemento).text("Párrafo número: " + indice);
  });
</script>

Éste sería el resultado

Ejemplo bucle each recorrer elementos con jQuery
Ejemplo bucle each

Como hemos visto, el bucle each recorre cada párrafo del documento y nos permite realizar acciones sobre él.

También podemos usarlo directamente sin utilizar ningún parámetro.

Veamos un ejemplo

<script>
  //Seleccionamos los elementos p y creamos el bucle each
  $("p").each(function(){
    //En cada elemento p ponemos el texto de color rojo
    $(this).css("color","red");
  });
</script>

El resultado será

Ejemplo método each sin parámetros en jQuery
Ejemplo función each

Recorrer elementos de una clase

Igual que recorremos los elementos, podemos recorrer los de la misma clase, clase y tipo, etc.

Veamos un ejemplo, ésta vez con clases

<body>
<!--Tenemos cuatro párrafos, dos con la clase negrita-->
  <p class="negrita">Párrafo 1</p>
  <p>Párrafo 2</p>
  <p class="negrita">Párrafo 3</p>
  <p>Párrafo 4</p>
</body>
<script>
  //Seleccionamos la clase negrita y creamos el bucle
  $(".negrita").each(function(){
    //En cada uno ponemos el texto en negrita
    $(this).css("font-weight","bold");
  });
</script>

El resultado será

Bucle each para recorrer clases en jQuery
Bucle each clases

Si te ha gustado no olvides compartir en redes sociales.

Espero que te haya servido. Cualquier duda deja un comentario. Un saludo

Dejar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Translate »
Ir a la barra de herramientas