En el desarrollo con jQuery, la iteración es una tarea fundamental. Aunque existen dos métodos que comparten el nombre each, su implementación y contexto de uso difieren significativamente: el método de instancia aplicado a objetos jQuery y el método estático o global.

1. El método de instancia .each()

Este método se utiliza exclusivamente sobre un objeto jQuery que contiene elemnetos del DOM seleccionados. Su propósito es ejecutar una función de retorno (callback) por cada elemento que coincida con el selector.

Sintaxis y Funcionamiento

$(selector).each(callback);

Dentro de la función callback, el puntero this hace referencia al elemento DOM actual de la iteración. La función recibe dos argumentos:

1. índice: La posición del elemento (comenzando en 0).
2. elemento: El elemento DOM actual (equivalente a this).

Si la función retorna false, el bucle se detiene inmediatamente (similar a un break). Cualquier otro valor permite continuar con el siguiente ciclo.

Ejemplo práctico: Modificación de contenido

Supongamos que tenemos una lista de tareas y queremos asignarles un prefijo dinámico:

// HTML: <ul id="lista-tareas"><li>Comprar leche</li><li>Llamar al médico</li></ul>

$("#lista-tareas li").each(function(pos, el) {
    var textoOriginal = $(el).text();
    $(el).text("Tarea " + (pos + 1) + ": " + textoOriginal);
});

Ejemplo de control de flujo: Validación de presupuesto

En este escenario, sumaremos el valor de productos seleccionados y detendremos la ejecución si superamos un límite:

$("#btnCalcular").click(function() {
    var costoTotal = 0;
    var limite = 500;

    $(".producto-chk:checked").each(function() {
        costoTotal += parseFloat($(this).val());
        
        if (costoTotal > limite) {
            console.log("Presupuesto excedido, deteniendo conteo...");
            return false; // Rompe el bucle
        }
    });
    
    alert("Costo final procesado: " + costoTotal);
});

2. El método global jQuery.each() o $.each()

A diferencia del anterior, $.each() es una función de utilidad general que puede iterar sobre arreglos de JavaScript, objetos planos o colecciones de elementos.

Sintaxis

$.each(coleccion, callback);

Parámetros

Al igual que en el método de instancia, el callback recibe el índice (o clave) y el valor actual. El uso de return false también cancela la iteración.

Ejemplo: Iterando arreglos y objetos

Podemos procesar estructuras de datos puras sin necesidad de interactaur con el DOM directamente:

// Iterar sobre un arreglo simple
var lenguajes = ["JavaScript", "Python", "PHP"];
$.each(lenguajes, function(idx, nombre) {
    console.log("ID: " + idx + " - Lenguaje: " + nombre);
});

// Iterar sobre un objeto (llave-valor)
var configuracion = { tema: "oscuro", fuente: "Arial", activo: true };
$.each(configuracion, function(clave, valor) {
    console.log("Propiedad: " + clave + " | Valor: " + valor);
});

Uso de $.each() con selectores

Aunque es más común usar el método de instancia, también es posible pasar un objeto jQuery como primer argumento del método global:

var inputs = $("input[type='text']");

$.each(inputs, function(index, inputDom) {
    if ($(inputDom).val() === "") {
        $(inputDom).css("border", "1px solid red");
    }
});

Comparativa y Retorno

Ambos métodos retornan el objeto original que se pasó para iterar, lo que permite mantener el encadenamiento (chaining) en jQuery. La elección entre uno u otro depende principalmente de la fuente de datos: si ya tienes una selección de elementos del DOM lista, $(selector).each() es más semántico; si manejas datos JSON o arreglos lógicos, $.each() es la opción adecudaa.