jQuery simple price * qty total on multiple items

Question

I am looking for an automatic total calculation for multiple instances of item on load. I tried finding the price and qty for each item but the total is not calculating.

 $(document).ready(function() { $('.item').each(function() { var qty = $(this).find('.qty').val(); var price = $(this).find('.price').val(); var total = qty * price; $('.total').val(total); }); }); 

 .item { border: 1px solid } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="item"> <div class="qty">50</div> <div class="price">10</div> <div class="total">0</div> </div> <div class="item"> <div class="qty">20</div> <div class="price">50</div> <div class="total">0</div> </div> <div class="item"> <div class="qty">19</div> <div class="price">40</div> <div class="total">0</div> </div> 

Answer 1

You need to use text and number function to calculate:

$(document).ready(function() {
  $('.item').each(function() {
    var qty = $(this).find('.qty').text();
    var price = $(this).find('.price').text();
    var total = Number(qty) * Number(price);
    $(this).find('.total').text(total);
  });
});

Answer 2

Here is a working example using jQuery#text() and converting to numeric values using unary plus operator

Code:

 $('.item').each(function() { $this = $(this); $this.find('.total').text( +$this.find('.qty').text() * +$this.find('.price').text() ); }); 

 .item { border: 1px solid } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="item"> <div class="qty">50</div> <div class="price">10</div> <div class="total">0</div> </div> <div class="item"> <div class="qty">20</div> <div class="price">50</div> <div class="total">0</div> </div> <div class="item"> <div class="qty">19</div> <div class="price">40</div> <div class="total">0</div> </div> 

Answer 3

I think find may cause performance hit.

Use normal class selector.

I found this article for the same

 // Find may cause performace overhead. $('.item').each(function() { $this = $(this); $('.total',$this).text( +$('.qty',$this).text() * +$('.price',$this).text() ); }); 

 .item { border: 1px solid #d4d4d4 } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="item"> <div class="qty">50</div> <div class="price">10</div> <div class="total">0</div> </div> <div class="item"> <div class="qty">20</div> <div class="price">50</div> <div class="total">0</div> </div> <div class="item"> <div class="qty">19</div> <div class="price">40</div> <div class="total">0</div> </div> 

Answer 4

What you have to do is parse the variable into it's type ie into Numbers or Int or Float

$(document).ready(function() {
  $('.item').each(function() {
    var qty = $(this).find('.qty').val();
    var price = $(this).find('.price').val();
    var total = parseFloat(qty) * parseFloat(price);
    $('.total').val(total);
  });
});

You can replace parseFloat into Number too. Also if you don't need decimal values use parseInt