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 !

9 comments

  • Pingback: Recorriendo un tabla con jQuery [.each] « Todo en Visual Basic.Net

  • Que feo cuando ajguien tiene una duda y el autor ni bola da!

  • Hola. Me sirvio para una cosa. gracias

  • Hola me gustaría saber si tienes algo para esta duda, necesito realizar algo parecido a la función de ASP.NET Page.Control, pero para MVC.

    Te agradecería si me puedes indicar si tienes algo.

    Saludos.

  • Hola Geovanny, exactamente que necesitas hacer? recuerda que en MVC cambia mucho el concepto para trabajar con los controles de la UI, en ASP.NET WebForms teniamos controles de servidor, ahora las vistas son limpias.

    Saludos.

  • Que tal amigo. Tu código es muy entendible, pero mi duda es, [espero puedas ayudarme], tengo un varios divs con la misma clase, diferente contenido y id. La cantidad de estos divs tienden a aumentar con el tiempo p.e hoy son 5 mañana 10. Estaba intentando crear un código que me permitiera detectar cuantos div tengo y permitiera ir recorriendolos con botónes [a.link] cada uno de ellos, es decir algo similar a incrustarlos a un array sin importar cuantos existan y de ahí ir manejandolos a través del control adelante y atrás.
    Espero puedas ayudarme. Saludos y gracias.

Leave a Reply

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