我要總結多個div的相同類別

Question

我想帶班itemPrice

我的HTML

<div class="itemPrice">1,000</div> 
<div class="itemPrice">2,000.50</div> 
<div class="itemPrice">3,000</div> 
<div class="itemPrice">1,020.54</div> 
<div class="itemPrice">4,200</div> 
<div class="itemPrice">3,500</div> 

<div class="total">?????</div> 

我的JavaScript

$(document).ready(function() { 
    var sum = 0; 
    $(".itemPrice").each(function() { 
      var val = $.trim($('.itemPrice').text()); 
      // val = val.split(",") 
      if (val) { 
       val = parseFloat(val.replace(/^\$/, "")); 
       sum += !isNaN(val) ? val : 0; 
      } 
    }); 
    $('.total').text(sum); 
}); 

從<div>的獲得總價值但是由於逗號（，）它不起作用。

Answer 1

您可以使用此：

<div class="itemPrice">1,000</div> 
<div class="itemPrice">2,000.50</div> 
<div class="itemPrice">3,000</div> 
<div class="itemPrice">1,020.54</div> 
<div class="itemPrice">4,200</div> 
<div class="itemPrice">3,500</div> 

<div class="total">?????</div> 

<script> 
    $(document).ready(function(){ 
     var total = 0; 
     $('.itemPrice').each(function(){ 
      total += parseFloat($(this).text().replace(/,/g,'')) 
     }) 
     $('.total').text(total) 
    }) 
</script> 

Answer 2

曾爲多個逗號以及： -

採取

$(document).ready(function() { 
 
    var total = 0; // a variable 
 
    $('.itemPrice').each(function(){ // iterate itemPrice 
 
     total = parseFloat($(this).text().replace(/,/g , ''))+total; // remove comma from text and then convert to float and add it to total variable 
 
    }); 
 
    total = addCommas(total); // again add comma to match represenation like others 
 
    $('.total').html(total); // paste output to resultant div 
 
}); 
 

 
function addCommas(nStr) { // pass value to function 
 
    nStr += ''; 
 
    var x = nStr.split('.'); //split value with . 
 
    var x1 = x[0]; 
 
    var x2 = x.length > 1 ? '.' + x[1] : ''; 
 
    var rgx = /(\d+)(\d{3})/; 
 
    while (rgx.test(x1)) { //check array first value with regular expression 
 
     x1 = x1.replace(rgx, '$1' + ',' + '$2'); // add comma based on check 
 
    } 
 
    return x1 + x2; // return final value 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="itemPrice">1,000</div> 
 
<div class="itemPrice">2,000.50</div> 
 
<div class="itemPrice">3,000</div> 
 
<div class="itemPrice">1,020.54</div> 
 
<div class="itemPrice">4,200</div> 
 
<div class="itemPrice">3,500</div> 
 
<br/><br/> 
 
<div class="total">?????</div>

參考： - Add a thousands separator to a total with Javascript or jQuery?

Answer 3

$(document).ready(function() { 
 
    var sum = 0; 
 
     $(".itemPrice").each(function() { 
 
      var val = $(this).text(); 
 
      sum += parseFloat(val.replace(/,/g,'')) 
 
     }); 
 
     $('.total').text(sum); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
 
<div class="itemPrice">1,000</div> 
 
<div class="itemPrice">2,000.50</div> 
 
<div class="itemPrice">3,000</div> 
 
<div class="itemPrice">1,020.54</div> 
 
<div class="itemPrice">4,200</div> 
 
<div class="itemPrice">3,500</div> 
 

 
<div class="total">?????</div>

Answer 4

這是我會怎麼使用jQuery做。循環通過itemPrice類的div，將它們加起來，並用類total以div顯示結果。

$(document).ready(function() { 
 
    var sum = 0; 
 

 
    $('.itemPrice').each(function(index) { 
 
     sum += parseFloat($(this).text().replace(',','')); 
 
    }); 
 
    
 
    $('.total').html(sum); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="itemPrice">1,000</div> 
 
<div class="itemPrice">2,000.50</div> 
 
<div class="itemPrice">3,000</div> 
 
<div class="itemPrice">1,020.54</div> 
 
<div class="itemPrice">4,200</div> 
 
<div class="itemPrice">3,500</div> 
 

 
<div class="total">?????</div>