post

Criar lista com contagem numérica com jQuery

Publicado em: 18/06/2022

Categorias: BlogjQueryJS

É 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.

Clique aqui e entre em contato


Comentários