Compreendendo o método $.each() em jQuery

O método $.each() é uma ferramenta versátil forneciad pelo jQuery para percorrer coleções de dados e elementos DOM. Ele permite iterar sobre arrays, objetos JavaScript e conjuntos de elementos HTML com grande eficiência, simplificando significativamente a manipulação de estruturas complexas.

Iteração em arrays unidimensionais

Quando aplicado a um array simples, $.each() recebe dois parâmetros na função de retorno: o índice atual e o valor correspondente.

const letras = ['x', 'y', 'z'];
$.each(letras, function(indice, valor) {
    console.log('Índice:', indice);  // Exibe: 0, 1, 2
    console.log('Valor:', valor);    // Exibe: x, y, z
});

Navegação em arrays multidimensionais

Em esturturas bidimensionais, cada elemento do array externo é, por sua vez, um array. Isso exige uma iteração aninhada para acessar os valores individuais.

const matriz = [
    ['m1', 'm2', 'm3'],
    ['n1', 'n2', 'n3'],
    ['o1', 'o2', 'o3']
];

$.each(matriz, function(i, linha) {
    $.each(linha, function(j, elemento) {
        console.log('Posição [', i, '][', j, ']:', elemento);
    });
});

Neste caso, o primeiro loop percorre as linhas da matriz, enquanto o segundo explora cada item dentro da linha atual.

Percorrendo objetos JSON

Para objetos JavaScript (estruturas chave-valor), o $.each() fornece como parâmetros o nome da propriedade e seu conteúdo.

const dados = { nome: "João", idade: 30, cidade: "São Paulo" };

$.each(dados, function(chave, conteudo) {
    console.log('Propriedade:', chave);     // nome, idade, cidade
    console.log('Valor:', conteudo);        // João, 30, São Paulo
});

Diferentemente de arrays, onde o índice é numérico, em objetos o primeiro parâmetro representa a chave textual da propriedade.

Manipulação de elementos DOM

O método também pode ser usado para percorrer coleções de elementos do DOM selecionados via jQuery. Considere o seguinte HTML:

<input name="campo1" type="hidden" value="valorA" />
<input name="campo2" type="hidden" value="valorB" />
<input name="campo3" type="hidden" value="valorC" />

A iteração pode ser feita diretamente sobre os elementos ocultos:

$('input:hidden').each(function(index, elemento) {
    console.log('Ordem:', index);
    console.log('Nome do campo:', elemento.name);
    console.log('Valor:', elemento.value);
});

Note que tanto $.each() quanto o método de instância .each() podem ser utilizados. A principal diferença é que o primeiro é uma função estática do jQuery, enquanto o segundo é chamado diretamente sobre um objeto jQuery.

Diferenças entre $.each() e .each()

• $.each(): função utilitária estática, aceita qualquer coleção (array, objeto, NodeList).
• .each(): método de instância do jQuery, usado exclusivamente em conjuntos de elementos selecionados com $().

Ambos seguem a mesma assinatura de callback, onde o primeiro argumento é o índice ou chave, e o segundo é o valor ou elemento DOM.