1

Estou precisando de ajuda com a seguinte questão:

Em uma lista de preços HTML, eu quero criar uma função usando jQuery/JavaScript para que assim que a página carregar, a gente selecionar o objeto HTML, transformar em uma string, dividir ele após a vírgula e então, substituir o objeto HTML pela variável

$(document).ready(function() {
  var stringin = $('.priceList', 'ul', 'li').toString();
  var formatedPrice = $(stringin).split(',');

  $('.priceList', 'ul', 'li').innerHTML(formatedPrice[0]);
});
.price {
  position: absolute;
  top: 100px;
  left: 100px;
}
<!doctype html>
<html>

<head>
  <meta charset="utf-8" />
  <title>Cents</title>
  <link rel="stylesheet" href="main.css">

  <script src="jquery-3.2.1.min.js"></script>
</head>

<body>

  <div class="priceList">
    <ul>
      <li>R$ 50,89</li>
      <li>R$ 188,43</li>
      <li>R$ 1200,24</li>
    </ul>
  </div>

</body>

</html>

Acima foi a minha ideia, os passos foram: criar duas variáveis, a primeira para selecionar o objeto e transformar em uma string, na segunda eu divido a string em dois a partir da vírgula. Então, a gente pega o primeiro array "[0]" e altera o HTML. Enquanto estou escrevendo a dúvida eu já parei pra pensar que no caso, como estou lidando com mais de um valor, seria correto fazer um vetor, ou estou enganado?

Enquanto isso vou tentar fazer um vetor, qualquer coisa eu posto aqui se der certo.

De qualquer forma, preciso de ajuda, se houver uma outra forma de realizar o objetivo por favor me digam. talvez outra lógica, ou então com JavaScript puro...

8
  • 1
    ficou meio confuso sua explicação vc quer remover a virgula dos centavos isso? 2/10/2018 às 13:26
  • 1
    Também não entendi o que você quer fazer, mas seu jQuery está meio torto e estranho. innerHTML num objeto jquery? deveria utilizar html(). E se fosse utilizar innerHTML. deveria igualar isso ao valor, não por entre parenteses, aka: document.querySelector('.priceList', 'ul', 'li').innerHTML = formatedPrice[0] Também não entendi por que transformou num objeto jquery var formatedPrice = $(stringin).split(','); para usar split, se o split é feito para ser usado em arrays, não em objetos jquery. Precisa rever o seu código cara. 2/10/2018 às 13:33
  • opa, peço desculpas pela explicação, mas o objetivo é, por exemplo, um valor: "R$50,99" eu quero que exiba apenas "R$50", sem os centavos.
    – MSHijo
    2/10/2018 às 13:46
  • meio torto e estranho não... completamente torto e estranho, é que eu ainda sou iniciante mano, acabou misturando muita coisa ainda infelizmente... sério? eu achava que com o split eu conseguiria transformar uma string em um array com duas posições, tipo a ideia é que [0] fosse o "R$50" e o [1] tudo que está depois da vírgula
    – MSHijo
    2/10/2018 às 13:48
  • no caso então, se eu precisar utilizar o innerHTML, ficaria assim:
    – MSHijo
    2/10/2018 às 14:01

1 Resposta 1

4

Um problema também é que este seletor é inválido: $('.priceList', 'ul', 'li'). O correto seria: $('.priceList ul li') (li filho de um ul filho da classe .priceList).

Realmente usando .split é mais simples, mas é preciso fazer o laço para percorrer cada elemento:

$(document).ready(function() {
   $('.priceList ul li').each(function(){
      var stringin = $(this).text();
      var formatedPrice = stringin.split(',')[0];
      $(this).text(formatedPrice);
   });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="priceList">
    <ul>
      <li>R$ 50,89</li>
      <li>R$ 188,43</li>
      <li>R$ 1200,24</li>
    </ul>
  </div>

Usando JavaScript puro ficaria assim:

document.addEventListener("DOMContentLoaded", function(){
   var vals = document.querySelectorAll('.priceList ul li');
   for(var x=0; x<vals.length; x++){
      var stringin = vals[x].textContent;
      var formatedPrice = stringin.split(',')[0];
      vals[x].textContent = formatedPrice;
   }
});
<div class="priceList">
    <ul>
      <li>R$ 50,89</li>
      <li>R$ 188,43</li>
      <li>R$ 1200,24</li>
    </ul>
  </div>

6
  • então o each, ele vai em cada um dos itens? ele só funcionaria para <li>, no caso se eu tivesse elementos em <span> e eu utilizasse o nome da classe, também conseguiria? e outra dúvida, o .text() eu uso para atribuir o texto html para a variável? no caso eu tava tentando usar o toString, e eu dei uma olhada na documentação e esse toString só funciona em caso de números... mano muito obrigado seus exemplos me deram uma puta noção melhor pra lógica desse caso.
    – MSHijo
    2/10/2018 às 13:58
  • Sim, você usa o seletor de acordo com o tipo de elemento que vai percorrer. No caso de span ficaria $(".priceList span").
    – Meu ovo
    2/10/2018 às 14:00
  • putz que bacana, adorei! each faz o papel do vetor que vc usou no javascript "var x=0; x<vals.length; x++"
    – MSHijo
    2/10/2018 às 14:04
  • dando uma olhada no código javascript eu fiquei mais ou menos com uma dúvida: essa variável "vals" a gente cria para pegar o ".priceList" no caso a gente não poderia pegar ela diretamente no stringin?
    – MSHijo
    2/10/2018 às 18:40
  • ahhh sim pq se não ele pegaria o valor referente a todos os li né, pode crer
    – MSHijo
    2/10/2018 às 18:40

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 .