如何总结div值?

时间:2017-08-18 19:40:04

标签: javascript jquery html sum each

我有一些有价值的div。我想总结一个<h3> 我的代码中的探测器是我得到最后一个div值而不能相加另一个。

Html代码:

<div class="cart-footer">
      <div class="order-tools">
        <h3 id="total">

        </h3>
      </div>
      <div class="cash-out">

      </div>
    </div>

Jquery的:

var sum = 0;
$('#item-total').each(function(){
 var val = $.trim($(this).text());
 if (val) {
 val = parseFloat(val.replace(/^\$/, ""));
 sum += !isNaN(val) ? val : 0;
 }
});
$("#total").html(sum + "$");

您可以在此代码中看到#item-total

$(".cart-body").append(function(){
     return "<div id='cart-list'><div class='product-name'>"+personObject.name+"</div><div class='product-tools'><input type='number' data-id='1' value='1' min='1'></input><label id='price'>Price: "+personObject.price+"</label><label data-value='"+personObject.count * personObject.price+"' id='item-total'>"+personObject.count * personObject.price+"</label></div></div>";
   });

1 个答案:

答案 0 :(得分:1)

您正在处理代码中的逻辑错误。你做错了什么是循环$('#item-total')。这是错误的,因为#item-total正在选择单一唯一 HTML元素。

您要做的是使用不同的选择器遍历所有元素。例如,将HTML <h3 id="total">替换为<h3 class="total">

现在,在您的JQuery中,选择$('.total')将选择{{1>}标记的HTML元素的所有实例

.total
var items = $('.item'),
    cashOut = $('#cash-out'),
    sum = 0;

$.each(items, function(value) {
  // items[value] will contain an HTML element, representing an 'item'.
  var itemValue = parseFloat(items[value].innerHTML);
  sum += !isNaN(itemValue) ? itemValue : 0;
});

cashOut.html('Total: $' + sum);