post
Criar lista com contagem numérica com jQuery
Publicado em: 18/06/2022
É possível pegar uma class que se repete, e usar ela para retornar uma contagem com uma lista com números em sequencia, apenas com jQuery.
Como mostra o exemplo abaixo:
<div class="lista"> <p class="item"></p> <p class="item"></p> <p class="item"></p> <p class="item"></p> <p class="item"></p> </div> <script> var contagemLista = 0; $(".lista .item").each(function() { contagemLista = contagemLista + 1; $(this).text(contagemLista); }); </script> <!-- RETORNA: <div class="lista"> <p class="item">1</p> <p class="item">2</p> <p class="item">3</p> <p class="item">4</p> <p class="item">5</p> </div> -->
Também é possível fazer uma formatação com texto já existente, como no exemplo abaixo:
<div class="lista"> <p class="item">Primeiro texto</p> <p class="item">Segundo texto</p> <p class="item">Terceiro texto</p> <p class="item">Quarto texto</p> <p class="item">Quinto texto</p> </div> <script> var contagemLista = 0; $(".lista .item").each(function() { contagemLista = contagemLista + 1; $(this).text(contagemLista + " - " + $(this).text()); }); </script> <!-- RETORNA: <div class="lista"> <p class="item">1 - Primeiro texto</p> <p class="item">2 - Segundo texto</p> <p class="item">3 - Terceiro texto</p> <p class="item">4 - Quarto texto</p> <p class="item">5 - Quinto texto</p> </div> -->
Link de compartilhamento
Compartilhe esse conteudo nas redes sociais ou por mensagem usando o link curto abaixo. Basta clicar em cima do link para copiar.
bruno.art.br/pb/1759
ID de Referência: 1759
Sugira uma publicação
Envie uma mensagem para mim, e sugira alguma publicação de algum tema que tenha dificuldades de resolver.