jQuery - Loop Each
O loop each da biblioteca jQuery pode ser usado tanto em arrays quando em objetos, ou seja, pode substituir tanto o loop for quanto o loop for/in.
A sintaxe deste loop é bem simples, conforme podemos ver a seguir:
$.each(array ou objeto, função(a,b) {
// código a ser repetido
});
Na função passada no loop each, temos dois argumentos, representados acima pelas variáveis a e b, que representam o índice/chave e o valor de cada elemento.
Vejamos dois exemplos, com um array e com um objeto:
// Aplicação do loop each em um array:
var lista = ["HTML","CSS","Javascript", "jQuery", "PHP"];
$.each(lista, function( indice, valor ) {
console.log('O elemento de índice [' + indice + '] tem o valor de ' + valor);
});
// Aplicação do loop each em um objeto:
var pessoa = {
'nome': 'João Pedro',
'DN': '20/01/1990',
'CPF': '111.111.111-11'
};
$.each(pessoa, function( chave, valor ) {
console.log('O elemento de chave [' + chave + '] tem o valor de ' + valor);
});
Percorrendo um array de elementos HTML
Vamos lembrar que podemos selecionar vários elementos HTML ao mesmo tempo, obtendo de volta um array. Vamos percorerer os elementos da <ul> abaixo que tem o id="interesses" e soltá-los no console com o loop each:
- Desenvolvimento Front End
- Desenvolvimento Back End
- UX Design
- Design Gráfico
var interesses = $("#interesses li");
$.each(interesses, function( indice, valor ) {
console.log(valor);
});
E se quiséssemos aplicar o método text() ou qualquer outro em cada um destes elementos? É possível fazer isto dentro do loop each, só precisamos ter atenção pois não podemos aplicar o método diretamente sobre o elemento na passagem do loop, apenas após usá-lo dentro do seletor jQuery:
var interesses = $("#interesses li");
$.each(interesses, function( indice, valor ) {
console.log($(valor).text());
});
// Se fizéssemos console.log(valor.text()); teríamos um erro na execução do código