CODEWITHSUNDEEP
jquery
Barış Çelik
Barış Çelik

Reputation: 13

Take each value from same class, make calculations then append it with jQuery

I want to take values from each .discountPrice span, convert them to the numbers, make calculations and append them to the .pSale tag. I think that I need to use "this" keyword, but I couldn't integrate this to my code somehow...

Here is my code:

$(document).ready(function() {
  var sPrice = $(".productItem .productDetail .productPrice .discountPrice span").text();
  var sPrice = sPrice.replace("$", "");
  var sPrice = parseFloat((sPrice) * 0.7).toFixed(2);
  $(".pSale").html(sPrice);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="productItem">
  <div class="productDetail">
    <div class="productPrice">
      <div class="discountPrice">
        <span>$25</span>
      </div>
    </div>
  </div>
  <div class="productIcon">
    <div class="salePrice">
      <span class="pSale">
                // This should be 25 * 0.7 = 17.50 //
            </span>
    </div>
  </div>
</div>
<div class="productItem">
  <div class="productDetail">
    <div class="productPrice">
      <div class="discountPrice">
        <span>$35</span>
      </div>
    </div>
  </div>
  <div class="productIcon">
    <div class="salePrice">
      <span class="pSale">
                // This should be 35 * 0.7 = 24.50 //
            </span>
    </div>
  </div>
</div>

Upvotes: 1

Views: 62

Answers (2)

HMZ
HMZ

Reputation: 3127

While i was writing my answer i saw @RoryMcCrossan excellent answer which should be the accepted answer.

But since i wrote mine i might as well share it (also see my JSFiddle):

$(document).ready(function() {
  let dPrices = $(".discountPrice");
  dPrices.each(function(index, element) {
    let dPrice = $(element).children("span").text();
    let parsedPrice = dPrice.replace("$", "");
    let calculatedPrice = parseFloat((parsedPrice) * 0.7).toFixed(2);
    $(element).parents(".productItem").find(".pSale").text(calculatedPrice);
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="productItem">
    <div class="productDetail">
        <div class="productPrice">
            <div class="discountPrice">
                <span>$25</span>
            </div>
        </div>
    </div>
    <div class="productIcon">
        <div class="salePrice">
            <span class="pSale">
            </span>
        </div>
    </div>
</div>
<div class="productItem">
    <div class="productDetail">
        <div class="productPrice">
            <div class="discountPrice">
                <span>$35</span>
            </div>
        </div>
    </div>
    <div class="productIcon">
        <div class="salePrice">
            <span class="pSale">
            </span>
        </div>
    </div>
</div>

Upvotes: 1

Rory McCrossan
Rory McCrossan

Reputation: 337570

The issue with your current approach is that you're working with all the discountPrice and .pSale elements at once. To fix this you need to create a loop and perform the calculation on each one individually.

One way to achieve that would be to loop through the .pSale elements and set their text based on the value calculated from their related .discoutPrice element, like this:

jQuery($ => {
  $('.pSale').text(function() {
    return (($(this).closest('.productItem').find('.discountPrice').text().replace('$', '') || 0) * 0.7).toFixed(2);
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="productItem">
  <div class="productDetail">
    <div class="productPrice">
      <div class="discountPrice">
        <span>$25</span>
      </div>
    </div>
  </div>
  <div class="productIcon">
    <div class="salePrice">
      <span class="pSale">
        // This should be 25 * 0.7 = 17.50 //
      </span>
    </div>
  </div>
</div>
<div class="productItem">
  <div class="productDetail">
    <div class="productPrice">
      <div class="discountPrice">
        <span>$35</span>
      </div>
    </div>
  </div>
  <div class="productIcon">
    <div class="salePrice">
      <span class="pSale">
        // This should be 35 * 0.7 = 24.50 //
      </span>
    </div>
  </div>
</div>

Upvotes: 2

Related Questions