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

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

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

这是我的密码：

$document.readyfunction{ var总和=0.00； $.item-row.eachfunction{ var val=$.trim$.cart-item-price.text； 如果val{ val=parseFloatval.replace/^\$/； sum+=！isNaNval？val:0； } }; $.item total price.html“item total price:”+sum.toFixed2+€； /*alertsum*/ }; .项目名称{ 浮动：左； 宽度：150px； } .购物车商品价格{ 浮动：左； 文本对齐：右对齐； 宽度：100px； } .额外项目{ 浮动：左； 宽度：150px； 字号：200； } .项目总价{ 宽度：250px； 文本对齐：右对齐； 边缘顶部：25px； 显示：块； 明确：两者皆有； 边缘底部：25px； 溢出：隐藏； } iPhone 12： 100.40€ 案例： 5.00€ 红色： 15.00€ 电力银行： 15.00€ 三星Galaxy S88： 982.40€ 案例： 3.80€ 红色： 9.00€ 电力银行： 15.40€

---

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

其次，您需要另一个循环，遍历当前.item行中的所有.cart item price元素来计算总和

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

jQueryfunction${ $.item-row.eachfunction{ var总和=0.00； $this.find'.cart item price'.eachfunction{ sum+=parseFloat$this.text.trim | | 0； }; $this.find.item total price.html“item total price:”+sum.toFixed2+€； }; }; .项目名称{ 浮动：左； 宽度：150px； } .购物车商品价格{ 浮动：左； 文本对齐：右对齐； 宽度：100px； } .额外项目{ 浮动：左； 宽度：150px； 字号：200； } .项目总价{ 宽度：250px； 文本对齐：右对齐； 边缘顶部：25px； 显示：块； 明确：两者皆有； 边缘底部：25px； 溢出：隐藏； } .项目总价格范围{ 颜色：红色； 浮动：左； } iPhone 12： 100.40€ 案例： 5.00€ 红色： 15.00€ 电力银行： 15.00€ 三星Galaxy S88： 982.40€ 案例： 3.80€ 红色： 9.00€ 电力银行： 15.40€

---

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

其次，您需要另一个循环，遍历当前.item行中的所有.cart item price元素来计算总和

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

jQueryfunction${ $.item-row.eachfunction{ var总和=0.00； $this.find'.cart item price'.eachfunction{ sum+=parseFloat$this.text.trim | | 0； }; $this.find.item total price.html“item total price:”+sum.toFixed2+€； }; }; .项目名称{ 浮动：左； 宽度：150px； } .购物车商品价格{ 浮动：左； 文本对齐：右对齐； 宽度：100px； } .额外项目{ 浮动：左； 宽度：150px； 字号：200； } .项目总价{ 宽度：250px； 文本对齐：右对齐； 边缘顶部：25px； 显示：块； 明确：两者皆有； 边缘底部：25px； 溢出：隐藏； } .项目总价格范围{ 颜色：红色； 浮动：左； } iPhone 12： 100.40€ 案例： 5.00€ 红色： 15.00€ 电力银行： 15.00€ 三星Galaxy S88： 982.40€ 案例： 3.80€ 红色： 9.00€ 电力银行： 15.40€

---

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

你需要改变你的逻辑。开始很好。使用每个

但是，然后选择对应于该特定行的价格。所以使用这个关键字。总价也一样

见下文

$document.readyfunction{ $.item-row.eachfunction{ var总和=0.00； var itemPrices=$this.find.cart-item-price $itemPrices.eachfunction{ var val=$.trim$this.text； 如果val{ val=parseFloat val.replace/^\$/； 总和+=！isNaN值？值：0； } } var totalPrice=$this.find.item-total-price； totalPrice.html“项目总价：”+sum.toFixed2+€； }; /*alertsum*/ }; .项目标题{ 浮动：左； 宽度：150px； } .购物车商品价格{ 浮动：左； 文本对齐：右对齐； 宽度：100px； } .项目e xtra{ 浮动：左； 宽度：150px； 字号：200； } .项目总价{ 宽度：250px； 文本对齐：右对齐； 边缘顶部：25px； 显示：块； 明确：两者皆有； 边缘底部：25px； 溢出：隐藏； } iPhone 12： 100.40€ 案例： 5.00€ 红色： 15.00€ 电力银行： 15.00€ 三星Galaxy S88： 982.40€ 案例： 3.80€ 红色： 9.00€ 电力银行： 15.40€

---

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

你需要改变你的逻辑。开始很好。使用每个

但是，然后选择对应于该特定行的价格。所以使用这个关键字。总价也一样

见下文

$document.readyfunction{ $.item-row.eachfunction{ var总和=0.00； var itemPrices=$this.find.cart-item-price $itemPrices.eachfunction{ var val=$.trim$this.text； 如果val{ val=parseFloat val.replace/^\$/； 总和+=！isNaN值？值：0； } } var totalPrice=$this.find.item-total-price； totalPrice.html“项目总价：”+sum.toFixed2+€； }; /*alertsum*/ }; .项目标题{ 浮动：左； 宽度：150px； } .购物车商品价格{ 浮动：左； 文本对齐：右对齐； 宽度：100px； } .额外项目{ 浮动：左； 宽度：150px； 字号：200； } .项目总价{ 宽度：250px； 文本对齐：右对齐； 边缘顶部：25px； 显示：块； 明确：两者皆有； 边缘底部：25px； 溢出：隐藏； } iPhone 12： 100.40€ 案例： 5.00€ 红色： 15.00€ 电力银行： 15.00€ 三星Galaxy S88： 982.40€ 案例： 3.80€ 红色： 9.00€ 电力银行： 15.40€

---

javascript几乎没有问题。 在$.item-row.each函数中，您应该获得所有.cart商品价格div，并使用一个以上的inner.each函数对其进行汇总

只需将您的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) + "€");

  })
});

---

javascript几乎没有问题。 在$.item-row.each函数中，您应该获得所有.cart商品价格div，并使用一个以上的inner.each函数对其进行汇总

只需将您的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) + "€");

  })
});

---

嗨@Rory McCrossan谢谢你的回答，但部分有效。在代码中的第二项，价格又错了。它必须是1010.60欧元，而不是982.40欧元。它工作得很完美。非常感谢你的努力。我会选择你的答案作为正确答案。嗨@Rory McCrossan谢谢你的回答，但它部分有效。在代码中的第二项，价格又错了。它必须是1010.60欧元，而不是982.40欧元。它工作得很完美。非常感谢你的努力。我将选择您的答案作为正确答案第二项的总价是错误的：它必须是1010.60而不是1146.00！：@设计师：1010.60：第二项的总价错误：必须是1010.60而不是1146.00！：@设计者：1010.60：