post

Criando Números Sequenciais Dinamicamente com JavaScript

Publicado em: 06/10/2023

Categorias: BlogJavaScriptJS

Se você esta precisando criar uma sequencia de numeros dinamicamente para adicionar a uma lista em HTML, você pode usar essa solução em javascrip abaixo:

Digamos que você tenha a seguinte sequencia e precise adicionar os números dinamicamente:

<p>Etapa: <span class="numero-lista"></span></p>
<p>Etapa: <span class="numero-lista"></span></p>
<p>Etapa: <span class="numero-lista"></span></p>
<p>Etapa: <span class="numero-lista"></span></p>
<p>Etapa: <span class="numero-lista"></span></p>
<p>Etapa: <span class="numero-lista"></span></p>

Neste caso, você pode adicionar esse código javascript para que ele leia todas as class “numero-lista” da página, e adicione uma sequencia de números dentro de cada tag span.

const elementos = document.querySelectorAll('.numero-lista');
let contador = 1;
	
elementos.forEach(elemento => {
	elemento.textContent = contador;
	contador++;
});

Resultado:

<p>Etapa: <span class="numero-lista">1</span></p>
<p>Etapa: <span class="numero-lista">2</span></p>
<p>Etapa: <span class="numero-lista">3</span></p>
<p>Etapa: <span class="numero-lista">4</span></p>
<p>Etapa: <span class="numero-lista">5</span></p>
<p>Etapa: <span class="numero-lista">6</span></p>


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/3441

ID de Referência: 3441

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