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 !

You may also like...

8 Responses

  1. Alvaro says:

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

  2. Hector says:

    Hola. Me sirvio para una cosa. gracias

  3. Geovanny V. says:

    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.

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

  5. julio says:

    Hola como estas …. queria saber como haria para recorrer divs dentro d un contenedor dependiendo del id del contendor
    …tengo 32 div y dentro de cada 1 cinco divs :S

  6. Hola, mira seria algo como:
    $(“#idContenedor div”).each(fucntion(index){
    //aca el codigo
    })
    cualquier cosa avisame

  1. May 13, 2011

    [...] Recorriendo elementos con jQuery [.each] [...]

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Follow

Get every new post on this blog delivered to your Inbox.

Join other followers: