我有一些具有价值的股利。我想总结一个<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>";
});
最佳答案
您正在处理代码中的逻辑错误。您所做的错误操作正在遍历$('#item-total')
。这是错误的,因为#item-total
选择一个唯一的HTML元素。
您要做的是使用一个不同的选择器遍历所有元素。例如,通过将HTML:<h3 id="total">
替换为<h3 class="total">
。
现在,在您的JQuery中,选择$('.total')
然后将选择.total
标记的HTML元素的所有实例。
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);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cart-footer">
<div class="order-tools">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>
</div>
<div id="cash-out">0</div>