jQuery does not display the pennies in a price list

Asked

Viewed 78 times

1

I am in need of help with the following question:

In an HTML price list, I want to create a function using jQuery/Javascript so that as soon as the page loads, we select the HTML object, transform it into a string, split it after the comma, and then replace the HTML object with the variable

$(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>

Above was my idea, the steps were: create two variables, the first to select the object and turn into a string, in the second I divide the string into two from the comma. Then, we take the first array "[0]" and change the HTML. While I am writing the question I have already stopped to think that in the case, as I am dealing with more than one value, it would be correct to make a vector, or I am mistaken?

In the meantime I’ll try to make a vector, anything I put here if it works.

Anyway, I need help, if there’s another way to accomplish the goal please let me know. maybe another logic, or with pure Javascript...

javascript jquery
  • 1

    got a little confused your explanation you want to remove the comma from the pennies that?

  • 1

    I also don’t understand what you want to do, but your jQuery is kind of crooked and weird. innerHTML in a jquery? object html(). And if I were to use innerHTML. should match this to the value, not between parentheses, aka: document.querySelector('.priceList', 'ul', 'li').innerHTML = formatedPrice[0] I also don’t understand why you turned it into a jquery object var formatedPrice = $(stringin).split(','); to use split, if split is made to be used in arrays, not jquery objects. You need to review your code guy.

  • opa, I apologize for the explanation, but the goal is, for example, a value: "R$50,99" I want to display only "R$50", without the pennies.

  • Half crooked and not weird... completely crooked and weird, is that I’m still beginner bro, ended up mixing a lot of stuff still unfortunately... seriously? i thought that with the split I could transform a string into an array with two positions, like the idea is that [0] is the "R$50" and the [1] everything that is after the comma

  • in case then, if I need to use innerHTML, it would look like this:

  • innerHTML = formatedPrice[0];

  • You can use split() in a string, the point is that you took the variable and threw it into a jquery object, placing the $() around. That happens to be an object, not a string. And then the split will not run properly.

  • is I messed up too much, the guy who helped down there, used . text()... but anyway, the whole code was wrong...

Show 3 more comments

1 answer

4


One problem is also that this selector is invalid: $('.priceList', 'ul', 'li'). The right thing would be: $('.priceList ul li') (li son of a ul class child .priceList).

Really using .split is simpler, but you need to make the loop to go through each element:

$(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>

Using pure Javascript would look like this:

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>

  • So each, it goes on each of the items? it would only work for <li>, in case if I had <span> elements and I used the class name, I could also? and another doubt, the . text() do I use to assign the html text to the variable? in the case I was trying to use toString, and I took a look at the documentation and this toString only works in case of numbers... bro thank you so much your examples gave me a better fucking notion for logic of this case.

  • Yes, you use the selector according to the type of element you will be going through. In case span would be $(".priceList span").

  • I love it! each plays the role of the vector you used in javascript "var x=0; x<vals.length; x++"

  • taking a look at the javascript code I was more or less with a doubt: this variable "vals" we create to catch the ". priceList" in case we couldn’t pick her up directly in the stringin?

  • Ahhh yes pq otherwise he would take the amount for all li right, believe me

  • That’s right :D...

Show 1 more comment

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.