使用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);