使用js或jQuery计算td类的总和

Question

我有一个下拉选择菜单，其中包含代表计算机数量的各种选项（即5,10,15,20 ......）。 默认的选择菜单值是5.我使用一些js将下拉选项乘以一个数量（即10），并使用.price-1类填充表td。 因此，例如，如果用户保留默认选择5，则.price-1的计算值为50。

这工作正常。

但是，我需要将.price-1与其他一些<td>类（即.price-2，.price-3，.price-4 ...）相加，以得到$ value中的总值。 ＃结果。

我如何使用js或jQuery来总结这些td类来获得总计？

下面是我需要总结的表格的html。

<table id="tableOrderTotal" class="table tableTotal"> 
 <tbody> 
  <tr> 
   <td>Item1</td> 
   <td class="price-1">calculated amount populated here</td> 
  </tr> 
  <tr> 
   <td>Item2</td> 
   <td class="price-2">calculated amount populated here</td> 
  </tr> 
  <tr> 
   <td>Item3</td> 
   <td class="price-3">13</td> 
  </tr>
  <tr> 
   <td>Item3</td> 
   <td class="price-4">30</td> 
  </tr> 
  <tr class="summary"> 
   <td class="totalOrder">Total:</td> 
   <td id="result" class="totalAmount"> </td> 
  </tr> 
 </tbody> 
</table>

Answer 1

使用:nth-child()使用属性值包含选择器或tr的第二个td元素获取所有td元素。 现在使用each()方法迭代它们并使用里面的文本获得总和。

 var sum = 0; $('td[class*="price-"]').each(function() { sum += Number($(this).text()) || 0; }); $('#result').text(sum); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table id="tableOrderTotal" class="table tableTotal"> <tbody> <tr> <td>Item1</td> <td class="price-1">calculated amount populated here</td> </tr> <tr> <td>Item2</td> <td class="price-2">calculated amount populated here</td> </tr> <tr> <td>Item3</td> <td class="price-3">13</td> </tr> <tr> <td>Item3</td> <td class="price-4">30</td> </tr> <tr class="summary"> <td class="totalOrder">Total:</td> <td id="result" class="totalAmount"></td> </tr> </tbody> </table> 

---

使用Array#reduce方法作为@rayon建议。

 $('#result').text([].reduce.call($('td[class*="price-"]'), function(sum, ele) { return sum + (Number($(ele).text()) || 0); }, 0)); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table id="tableOrderTotal" class="table tableTotal"> <tbody> <tr> <td>Item1</td> <td class="price-1">calculated amount populated here</td> </tr> <tr> <td>Item2</td> <td class="price-2">calculated amount populated here</td> </tr> <tr> <td>Item3</td> <td class="price-3">13</td> </tr> <tr> <td>Item3</td> <td class="price-4">30</td> </tr> <tr class="summary"> <td class="totalOrder">Total:</td> <td id="result" class="totalAmount"></td> </tr> </tbody> </table> 

Answer 2

jQuery Object有一个直接属性，指的是匹配元素的数量。

var sum = $('td[class*="price-"]').length;
$('#result').text(sum);