Ich möchte

Question

mehrere divs mit der gleichen Klasse zusammenzufassen

ich den Gesamtwert von <div> ‚s mit der Klasse itemPrice

Mein 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> 

Mein 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); 
}); 

erhalten möchten Aber es funktioniert nicht wegen des Kommas (,).

Answer 1

Sie können diese verwenden:

<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

für mehrere Kommata arbeitete auch: -

$(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>

Referenz genommen: - 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

Dies ist, wie ich es mit jQuery tun würde. Durchlaufen Sie die Divs mit der Klasse itemPrice, addieren Sie sie und zeigen Sie das Ergebnis in div mit der Klasse total an.

$(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>