Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

Dúvida no loop for

Bom dia, fazendo uns testes fora do curso me deparei com um problema. Tenho uma <tr class="cliente"> com vários <td> com a class .nome. Exemplo:

<tr class="cliente">
    <td class="nome" >Felipe</td>
    <td class="nome" >Ramon</td>
</tr>

Quero pegar todos os nomes dos <td> quando seleciono a class cliente com getElementsByClassName("cliente") e percorrendo o array gerado com o loop for. Fiz tudo como foi passado nas videos aulas e texto do curso, mas quando retorno ele me retorna somente o primeiro nome, ou seja, a a primeira <td>. Tem como retornar todos os nomes das <td> ou com a mesma class o loop vai retornar o primeito <td> sempre?

4 respostas
solução!

Como vc está selecionando os TD com classe nome? Com getElementsByClassName tambem? Deveria retornar a lista....

Um esboço do que você pode fazer:

var clientes = document.getElementsByClassName("cliente");

for (var i = 0; i < clientes.length; i++) {
    var nomes = clientes[i].getElementsByClassName("nome");

   for (var j = 0; j < nomes.length; j++) {
      console.log(nomes[j]);
   }
}

Outra opção seria usar um seletor complexo direto com querySelectorAll:

document.querySelectorAll(".cliente .nome")

Entendi, eu fiz assim e funcionou:

var tdsCliente = document.getElementsByClassName("nome");

for(var posicaoAtual = 0; posicaoAtual <= tdsCliente.length - 1; posicaoAtual++){

    var arrayNomes = tdsCliente[posicaoAtual];

    var nome = arrayNomes.textContent;

    var cliente = {
        nome : nome
    };
    console.log( cliente.nome );
}

Selecionei as <td> somente e não a <tr> como eu estava selecionando, ai retornou o array que era para retornar antes. Está correto também?

Perfeito! Boa solução

Obrigado pela ajuda Sergio. Valeu.