如何使用jQuery删除跨度数值的25％？

Question

I want to remove 25% from a price and then show the sum in a new span. Something like this:

price * 0.8 = newPrice //edited

This is my span:

<span id="ctl00_main_ctl00_ctl00_labPrice" class="price" itemprop="price">21.188</span>

Here is what I've come up with so far...

$(".purchase-block-price" ).each(function() {

    // Show price ex vat
    var price = parseInt($(".price").text().trim().replace(".",""));
    var newprice = price * 0.8;

    $(newprice).appendTo(".purchase-block-price");
});

Is it even possible?

Answer 1

Sure, get the value (in this case with text() ) and multiply by 0.75.

 var value = parseFloat( $("#ctl00_main_ctl00_ctl00_labPrice").text() ); var newValue = value * 0.75; console.log( newValue ); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <span id="ctl00_main_ctl00_ctl00_labPrice" class="price" itemprop="price">21.188</span> 

Answer 2

Try :

 var oldprice = $('#ctl00_main_ctl00_ctl00_labPrice').text(); var newprice = oldprice - (oldprice * 0.20); console.log(newprice); /* Do whatever you want with your new price*/ 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <span id="ctl00_main_ctl00_ctl00_labPrice" class="price" itemprop="price">21.188</span> 

Answer 3

Use .text( function ) to replacing current value of span with new value.

$("#ctl00_main_ctl00_ctl00_labPrice").text(function(i, text){
  return text - (text * 0.25); // or text * 0.75
});

 $("#ctl00_main_ctl00_ctl00_labPrice").text(function(i, text){ return text * 0.75; }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <span id="ctl00_main_ctl00_ctl00_labPrice" class="price" itemprop="price">21.188</span> 

Answer 4

To achieve this you can loop over the .price elements, take the text() value from them and convert it to a floating point number using parseFloat() . From there you can calculate the value, minus 20% and insert a new span containing the value. Try this:

 $(".purchase-block-price .price").each(function() { var price = parseFloat($(this).text().trim()); var newprice = price * 0.75; $('<span class="newprice">' + newprice + '</span>').insertAfter(this); }); 

 .price { margin-top: 10px; display: block; } .newprice { color: red; display: block; font-size: 1.2em; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="purchase-block-price"> <span id="ctl00_main_ctl00_ctl00_labPrice" class="price" itemprop="price">21.188</span> </div> <div class="purchase-block-price"> <span id="ctl00_main_ctl00_ctl00_labPrice" class="price" itemprop="price">132.299</span> </div> 

Note that you can use the .toFixed(2) method to round the calculated price values if required.