logo javascript

Aprenda javascript com facilidade do zero

Prof. Ivan Lourenço Gomes

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:

                    

    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

                    
                

Índice de Aulas