CODEWITHSUNDEEP
javascriptjquery
Ido Angel-Bohadana
Ido Angel-Bohadana

Reputation: 165

calculate string (number) between two "</span>", and replace it with half the value

I have this html:

<span class="woocommerce-Price-amount amount">
  <span class="woocommerce-Price-currencySymbol">₪</span>
  13.9
</span>

I want to show half the price, e.g. half of 13.9 in this case (the code appears many times in the page, each time a different amount).

I tried this for capturing the string within the quote marks:

var str = $(".tax-product_cat.term-185 .woocommerce-Price-amount").html();
var newStr = str.split("</span>")[1].split("</span>")[0];
var halfprice = parseInt(newStr, 10) / 2;
$(".tax-product_cat.term-185 .woocommerce-Price-amount").html("<span class='woocommerce-Price-amount amount'><span class='woocommerce-Price-currencySymbol'>₪</span>"+halfprice+"</span>");

but didn't really work.

any ideas? thanks!

Upvotes: 2

Views: 93

Answers (2)

Steven Spungin
Steven Spungin

Reputation: 29149

Get the text element after the woocommerce-Price-currencySymbol, and manipulate its textContent. Unfortunately, you can't use ':last-child selectors for text nodes so this is the next best approach. 

const elements = document.querySelectorAll('.woocommerce-Price-currencySymbol')

for (let i = 0; i < elements.length; i++) {
  const textNode = elements[i].nextSibling
  textNode.textContent = parseFloat(textNode.textContent) / 2
}
<span class="woocommerce-Price-amount amount">
  <span class="woocommerce-Price-currencySymbol">₪</span> 13.9
</span>

<span class="woocommerce-Price-amount amount">
  <span class="woocommerce-Price-currencySymbol">₪</span> 14.9
</span>

<span class="woocommerce-Price-amount amount">
  <span class="woocommerce-Price-currencySymbol">₪</span> 15.9
</span>

Upvotes: 2

David Hor&#225;k
David Hor&#225;k

Reputation: 5565

Get the symbol string, use jQuery text() method, and use it as a split delimiter in the the whole text content of the root span.

$(".woocommerce-Price-amount").each(function(){
  var symbol = $(this).find(".woocommerce-Price-currencySymbol").text();
  var half = $(this).text().split(symbol)[1] / 2;
  console.log(half);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<span class="woocommerce-Price-amount amount">
  <span class="woocommerce-Price-currencySymbol">₪</span> 13.9
</span>

<span class="woocommerce-Price-amount amount">
  <span class="woocommerce-Price-currencySymbol">₪</span> 13.9
</span>

<span class="woocommerce-Price-amount amount">
  <span class="woocommerce-Price-currencySymbol">₪</span> 13.9
</span>

Upvotes: 1

Related Questions