Recorriendo elementos con jQuery [.each]

Posted on


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 !

About these ads

8 comentarios en “Recorriendo elementos con jQuery [.each]

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

      julio escribió:
      08/10/2011 en 14:48

      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

        Julio Avellaneda respondido:
        08/11/2011 en 21:30

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

    Alvaro escribió:
    05/30/2012 en 14:47

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

    Hector escribió:
    06/27/2013 en 11:58

    Hola. Me sirvio para una cosa. gracias

    Geovanny V. escribió:
    09/13/2013 en 13:20

    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.

    Julio Avellaneda respondido:
    09/23/2013 en 10:25

    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.

Deja un comentario

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s