Índice

Iteraciones en jQuery

El clásico bucle for en JavaScript requiere siempre especificar múltiples datos (por ejemplo, for (i=1; i<6; i++)). Hay que indicar el nombre de la variable del contador, así como su valor inicial, la condición que fija el límite del bucle y, finalmente, una instrucción que incrementa (o decrementa) el contador.

Para ello, jQuery propone el método each().

each(función)

Ejecuta la función que se pasa como argumento por cada aparición del objeto seleccionado.

La función debe tener un argumento (un entero), que representará la posición del elemento que se está tratando actualmente.

$("img").each(function(i){ 
    this.src = "test" + i + ".jpg"; 
});

Ejemplo

Al hacer clic en un botón, el script rellena los elementos de una lista <ul>.

Aspecto inicial:

images/11_3_v41.png

Aspecto obtenido al hacer clic en el enlace:

images/11_3_v42.png

El documento HTML:

<!doctype html> 
<html lang="es"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery</title> 
<script src="jquery.js"></script> 
<script> 
    $(document).ready(  function() { 
        $("button").click(function() { 
            $("#lista").find("li").each( function(i) { 
                $(this).html( $(this).html() + " ...