post
Criar lista com contagem numérica com jQuery
Publicado em: 18/06/2022 / Atualizado 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> -->
Publicações recomendadas:
Inscreva-se em Nossa News:
Seja notificando sempre que tiver conteúdo novo disponível no meu canal do Youtube ou artigo no meu Blog.

Link Curto para 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 e sugira um publicação sobre um assunto que tenha dificuldades de resolver.