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í
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
<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á
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á
Si te ha gustado no olvides compartir en redes sociales.
[addthis tool=»addthis_inline_share_toolbox_6jt6″]Espero que te haya servido. Cualquier duda deja un comentario. Un saludo