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

Question

我正在构建一个购物车块，我想使用 jQuery 获取每个“item-row”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

这里有几个问题。主要问题是您只需要在 current .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-price div，并使用另外一个内部 .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) + "€");

  })
});