Criando Números Sequenciais Dinamicamente com JavaScript - Bruno Devx - BR Criativus

post #3441

Criando Números Sequenciais Dinamicamente com JavaScript

Publicado em: 06/10/2023 / Atualizado em: 06/10/2023

Categorias: BlogJavaScript (JS)JS

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>

Publicações recomendadas:


Link Direto

Compartilhe esse conteudo nas redes sociais ou por mensagem usando o link direto abaixo. Basta copiar.

bruno.art.br/?p=3441

ID de Referência: 3441

Sugira uma publicação

Envie uma mensagem e sugira um publicação sobre um assunto que tenha dificuldades de resolver.

Clique aqui e entre em contato