如何使用 jQuery 对同一类的不同 div 的值求和?

Question

我正在构建一个购物车块，我想使用 jQuery 获取每个"项目行"div 的总价格，但我无法使其以正确的方式工作。更具体地说，对于第一项，总价必须为：100.40€ + 5.00€ +15.00€ +15.00€ = 135.40€ 相反，我在两个项目的总价上都得到了 200.80 欧元的总和！

从下面的代码中可以看出，结果是完全错误的。 我错过了什么？

这是我的代码：

$(document).ready(function() {
var sum = 0.00;
$(".item-row").each(function() {
var val = $.trim($(".cart-item-price").text());
if (val) {
val = parseFloat(val.replace(/^$/, ""));
sum += !isNaN(val) ? val : 0;
}
});
$(".item-total-price").html('<span style="color:red;float:left;">Item total price: </span>' + sum.toFixed(2) + "€");
/* alert(sum); */
});

.item-title {
float: left;
width: 150px;
}
.cart-item-price {
float: left;
text-align: right;
width: 100px;
}
.item-extra {
float: left;
width: 150px;
font-weight: 200;
}
.item-total-price {
width: 250px;
text-align: right;
margin-top: 25px;
display: block;
clear: both;
margin-bottom: 25px;
overflow: hidden;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="item-row">
<div class="item-title">iPhone 12: </div>
<div class="cart-item-price">100.40€</div>
<br/>
<div class="item-extra">Case: </div>
<div class="cart-item-price">5.00€</div>
<br/>
<div class="item-extra">Color Red: </div>
<div class="cart-item-price">15.00€</div>
<br/>
<div class="item-extra">Power Bank: </div>
<div class="cart-item-price">15.00€</div>
<div class="item-total-price"></div>
</div>
<div class="item-row">
<div class="item-title">Samsung Galaxy S88: </div>
<div class="cart-item-price">982.40€</div>
<br/>
<div class="item-extra">Case: </div>
<div class="cart-item-price">3.80€</div>
<br/>
<div class="item-extra">Color Red: </div>
<div class="cart-item-price">9.00€</div>
<br/>
<div class="item-extra">Power Bank: </div>
<div class="cart-item-price">15.40€</div>
<div class="item-total-price"></div>
</div>

Answer 1

这里有几个问题。主要问题是您需要仅在当前.item-row中选择相关的.cart-item.price和.item-total-price元素。为此，您可以使用$(this).find().

其次，您需要通过当前.item-row中的所有.cart-item-price元素进行另一个循环来计算sum。

最后，您需要将var sum = 0放置在外部each()循环中。试试这个：

jQuery(function($) {
$(".item-row").each(function() {
var sum = 0.00;
$(this).find('.cart-item-price').each(function() {
sum += parseFloat($(this).text().trim()) || 0;
});
$(this).find(".item-total-price").html('<span>Item total price: </span>' + sum.toFixed(2) + "€");
});
});

.item-title {
float: left;
width: 150px;
}
.cart-item-price {
float: left;
text-align: right;
width: 100px;
}
.item-extra {
float: left;
width: 150px;
font-weight: 200;
}
.item-total-price {
width: 250px;
text-align: right;
margin-top: 25px;
display: block;
clear: both;
margin-bottom: 25px;
overflow: hidden;
}
.item-total-price span {
color: red;
float: left;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="item-row">
<div class="item-title">iPhone 12: </div>
<div class="cart-item-price">100.40€</div>
<br/>
<div class="item-extra">Case: </div>
<div class="cart-item-price">5.00€</div>
<br/>
<div class="item-extra">Color Red: </div>
<div class="cart-item-price">15.00€</div>
<br/>
<div class="item-extra">Power Bank: </div>
<div class="cart-item-price">15.00€</div>
<div class="item-total-price"></div>
</div>
<div class="item-row">
<div class="item-title">Samsung Galaxy S88: </div>
<div class="cart-item-price">982.40€</div>
<br/>
<div class="item-extra">Case: </div>
<div class="cart-item-price">3.80€</div>
<br/>
<div class="item-extra">Color Red: </div>
<div class="cart-item-price">9.00€</div>
<br/>
<div class="item-extra">Power Bank: </div>
<div class="cart-item-price">15.40€</div>
<div class="item-total-price"></div>
</div>

Answer 2

您选择所有价格并将它们相加(从两行(，然后选择两个total-price并为两者设置相同的总和。这就是为什么它不起作用的原因。

你需要改变你的逻辑。开局是好的。使用each循环访问行

但随后选择与该特定行对应的价格。因此，请使用this关键字。total-price也是如此

见下文

$(document).ready(function(){
$(".item-row").each(function() {
var sum = 0.00;
var itemPrices = $(this).find(".cart-item-price")
$(itemPrices).each(function() {
var val = $.trim( $(this).text() );
if ( val ) {
val = parseFloat( val.replace( /^$/, "" ) );
sum += !isNaN( val ) ? val : 0;
}
})
var totalPrice = $(this).find(".item-total-price");
totalPrice.html('<span style="color:red;float:left;">Item total price: </span>' + sum.toFixed(2) + "€");
});
					  
/* alert(sum); */
});

.item-title { 
float:left;
width:150px;
}
.cart-item-price{
float:left;
text-align:right;
width:100px;
}
.item-extra { 
float:left;
width:150px;
font-weight:200;
}
.item-total-price {
width:250px;
text-align:right;
margin-top:25px;
display:block;
clear:both;
margin-bottom:25px;
overflow:hidden;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="item-row">
<div class="item-title">iPhone 12: </div>
<div class="cart-item-price">100.40€</div>
<br/>
<div class="item-extra">Case: </div>
<div class="cart-item-price">5.00€</div>
<br/>
<div class="item-extra">Color Red: </div>
<div class="cart-item-price">15.00€</div>
<br/>
<div class="item-extra">Power Bank: </div>
<div class="cart-item-price">15.00€</div>
<div class="item-total-price"></div>
</div>
<div class="item-row">
<div class="item-title">Samsung Galaxy S88: </div>
<div class="cart-item-price">982.40€</div>
<br/>
<div class="item-extra">Case: </div>
<div class="cart-item-price">3.80€</div>
<br/>
<div class="item-extra">Color Red: </div>
<div class="cart-item-price">9.00€</div>
<br/>
<div class="item-extra">Power Bank: </div>
<div class="cart-item-price">15.40€</div>
<div class="item-total-price"></div>
</div>

Answer 3

javascript 几乎没有问题。
在 $(".item-row"(.each(( 函数中，您应该获取所有 .cart-item-pricediv，并使用另一个内部 .each(( 函数汇总这些div。

只需将您的 javascript 替换为以下内容，一切都应该按预期工作：

$(document).ready(function() {
$( ".item-row" ).each(function( index ) {
var sum = 0.00;
$( this ).find( ".cart-item-price" ).each(function( index2 ) { 
var val = $( this ).text();
if (val) {
val = parseFloat(val.replace(/^$/, ""));
sum += !isNaN(val) ? val : 0;
}
});
$( this ).find( ".item-total-price").first().html('<span style="color:red;float:left;">Item total price: </span>' + sum.toFixed(2) + "€");
})
});