Recorriendo elementos con jQuery [.each]

En algunas ocasiones, vemos la necesidad de recorrer elementos en el cliente, ya sea una tabla, una lista,  o todos los elementos dentro de algún control como podría ser un div, dicha labor suele ser en ocasiones un poco complicada, ya que tendríamos que codificar bastante código JavaScript.

Sin embargo afortunadamente contamos con la excelente librería jQuery, la cual nos hace la vida realmente fácil, y una tarea tan complicada como la planteada anteriormente la podremos solucionar de una manera bastante sencilla, y lo mejor de todo con tan solo unas pocas líneas de código.

Para realizar la tarea de iterar sobre los elementos haremos uso de la función .each, la cual permite iterar sobre objetos del DOM y sobre arrays.

Para el ejemplo, que será algo sencillo vamos a tener un div el cual sirve de contenedor para algunos párrafos y otros div, la idea es cambiar el texto y el estilo de todos los párrafos contenidos en el div. Como texto vamos a indicar el número del párrafo encontrado (recuerda que con casi todos los elementos siempre inicia en 0).

El código HTML de nuestra página es bastante simple:

 1: <input type="button" id="btnRecorrer" value="Recorrer Div !" />
 2:     <div id="divRecorrer" style="border:1px Solid Red">
 3:         <br />
 4:         <p class="borde">Div o Párrafo?</p>
 5:         <div class="borde">Div o Párrafo?</div>
 6:         <p class="borde">Div o Párrafo?</p>
 7:         <div class="borde">Div o Párrafo?</div>
 8:         <p class="borde">Div o Párrafo?</p>
 9:         <div class="borde">Div o Párrafo?</div>
 10:         <p class="borde">Div o Párrafo?</p>
 11:         <div class="borde">Div o Párrafo?</div>
 12:         <br />
 13:     </div>

Y el código jQuery:

 1: $(function () {
 2:     $("#btnRecorrer").click(function () {
 3:         $("#divRecorrer p").each(function (index) {
 4:             $(this).removeClass();
 5:             $(this).addClass("parrafo");
 6:             $(this).text('Parrafo ' + index);
 7:         })
 8:     })
 9: })

Ahora una peque explicación del código anterior, en línea 2 asignamos un controlador al evento clic del botón, en la línea 3 utilizamos un selector por id y lo limitamos a solo los elementos que sean párrafos (p) y como se puede observar en la función declaramos una variables index, con la cual podemos obtener la posición del elemento, y en las siguientes tres líneas removemos todas las clases asociadas

Y listo..este es un ejemplo bastante sencillo de como podemos utilizar la función .each de jQuery.

Les dejo el código del ejemplo:

Descarga el Ejemplo !

8 comments

Leave a Reply

Your email address will not be published. Required fields are marked *