3

Estou com um problema ao percorrer rows (de uma DIV que está dentro de outra DIV) com o método each.

Quando uma condição é verdadeira, eu preciso interromper o loop e exibir uma mensagem para o usuário, mas não estou conseguindo interrompê-lo.

Pesquisei na net, e descobri que o each tem esse problema, mas só encontrei soluções usando o for e eu não sei como transformar minha estrutura atual de each para for. Alguém sabe me ajudar com isso ou oferecer alguma solução para interromper o laço each?

var rowPessoaAnaliseCredito = $(this).closest('.row-pessoa-analise-credito');

$(rowPessoaAnaliseCredito).find('.row-pessoa-analise-credito-consulta').each(function (indiceJ, elemento) {
    if ($(elemento).find('.sel-pessoa-analise-credito-consulta-orgao-protecao-credito').val() === '') 
        return;
});

1 Resposta 1

3

Segundo a documentação:

You can stop the loop from within the callback function by returning false.

Ou seja, basta que a função de callback retorne false.

Segue abaixo uma comparação do seu código (adaptado porque não foi fornecido o HTML), e a diferença quando o retorno é false:

// imprime "abc" e "def"
console.log('each percorre todos');
$('#analise-credito').find('.row-pessoa-analise-credito-consulta').each(function (indiceJ, elemento) {
    var valor = $(elemento).find('.sel-pessoa-analise-credito-consulta-orgao-protecao-credito').val();
    if (valor === '') {
        return; // <-- esse return não interrompe o each
    } else {
        console.log(`achei: ${valor}`);
    }
});

// imprime somente "abc"
console.log('--------\neach para no primeiro vazio que encontrar');
$('#analise-credito').find('.row-pessoa-analise-credito-consulta').each(function (indiceJ, elemento) {
    var valor = $(elemento).find('.sel-pessoa-analise-credito-consulta-orgao-protecao-credito').val();
    if (valor === '') {
        return false; // <-- retorna false para interromper o each
    } else {
        console.log(`achei: ${valor}`);
    }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="analise-credito">
  <p class="row-pessoa-analise-credito-consulta">
    <input type="text" class="sel-pessoa-analise-credito-consulta-orgao-protecao-credito" value="abc">
  </p>
  <p class="row-pessoa-analise-credito-consulta">
    <input type="text" class="sel-pessoa-analise-credito-consulta-orgao-protecao-credito" value="">  </p>
  <p class="row-pessoa-analise-credito-consulta">
    <input type="text" class="sel-pessoa-analise-credito-consulta-orgao-protecao-credito" value="def">  </p>
</div>

Ou seja, no primeiro caso ele percorre todos os elementos (imprimindo todos os não-vazios - no caso, "abc" e "def"). E no segundo caso, ele interrompe quando o primeiro vazio for encontrado, então só imprime o "abc".


A opção com for é sem jQuery, bastando usar querySelectorAll e querySelector para buscar os elementos que você precisa:

for (const elemento of document.querySelectorAll('.row-pessoa-analise-credito-consulta')) {
    var valor = elemento.querySelector('.sel-pessoa-analise-credito-consulta-orgao-protecao-credito').value;
    if (valor === '') {
        break; // interrompe o for
    } else {
        console.log(`achei: ${valor}`);
    }
}
<div id="analise-credito">
  <p class="row-pessoa-analise-credito-consulta">
    <input type="text" class="sel-pessoa-analise-credito-consulta-orgao-protecao-credito" value="abc">
  </p>
  <p class="row-pessoa-analise-credito-consulta">
    <input type="text" class="sel-pessoa-analise-credito-consulta-orgao-protecao-credito" value="">  </p>
  <p class="row-pessoa-analise-credito-consulta">
    <input type="text" class="sel-pessoa-analise-credito-consulta-orgao-protecao-credito" value="def">  </p>
</div>

1
  • 1
    Obrigado @hkotsubo!!!! O problema estava em eu retornar com "return". Ao retornar com "return false", deu certo. :)
    – Master JR
    Commented 22/09/2020 às 16:36

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .