0

Eu tenho várias divs com mesma class e diferentes valores. Queria selecionar todas elas, pegar o valor de cada uma e adicionar HTML em cada uma com novos valores. Com o código que fiz, consigo pegar o valor, transformar em número inteiro, dividir ele por 600 e adicionar o html que desejo. Mas só consigo para a primeira div. Alguém consegue ajudar?

$(document).ready(function() {
$wrapper = document.querySelector('.preco-promocional'),

precoTOTAL = $wrapper.innerHTML;

var s3 = precoTOTAL.replace(/[\D]+/g,'');
var valor = parseInt(s3); 
var garrafa = valor / 600;
    HTMLNovo = '<div style=" color:#4b1472; font-size:11px;">Preço para 6 unidades<br>Cada garrafa por R$ '+garrafa+',00</div>';

$wrapper.insertAdjacentHTML('beforeend', HTMLNovo);

  });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <div class="preco-promocional">R$ 1.500,00</div>
        
      <div class="preco-promocional">R$ 2.500,00</div>
        
      <div class="preco-promocional">R$ 3.500,00</div>
        

1
  • cfgallo, bem-vindo ao Stack Overflow em Português. Comece aqui para ter uma visão geral do site. pt.stackoverflow.com/tour
    – user60252
    1/10/2020 às 20:17

1 Resposta 1

0

A HTML5 define um método getElementsByClassName que nos permite selecionar conjuntos de elementos do documento com base nos identificadores que estão em seu atributo class.

var items = document.getElementsByClassName("preco-promocional")

O método getElementsByClassName () retorna uma coleção de elementos filhos de um elemento com o nome de classe especificado, como um objeto NodeList.

O objeto NodeList representa uma coleção de nós. Os nós podem ser acessados ​​por números de índice. O índice começa em 0.

Você pode usar a propriedade length do objeto NodeList para determinar o número de nós filhos com o nome de classe especificado

$(document).ready(function() {

var items = document.getElementsByClassName("preco-promocional"),i, len;

// percorre todos os elementos com o nome de classe ".preco-promocional"
for (i = 0, len = items.length; i < len; i++) {
  precoTOTAL = items[i].innerHTML;

  var s3 = precoTOTAL.replace(/[\D]+/g,'');

  var valor = parseInt(s3); 
  var garrafa = valor / 600;

  HTMLNovo ='<div style=" color:#4b1472; font-size:11px;">Preço para 6 unidades<br>Cada garrafa por R$ '+garrafa.toFixed(2)+'</div>';

  items[i].insertAdjacentHTML('beforeend', HTMLNovo);

}
  });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <div class="preco-promocional">R$ 1.500,00</div>
        
      <div class="preco-promocional">R$ 2.500,00</div>
        
      <div class="preco-promocional">R$ 3.500,00</div>
        

1
  • Perfeito! Muito obrigado!
    – cfgallo
    1/10/2020 às 20:23

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .