使用js或jQuery计算td类的和

Question

我有一个下拉选择菜单，有各种选项(即5、10、15、20.)代表#的计算机。默认的select菜单值为5，我使用一些js将下拉选择乘以一个数量(即10)，并使用..price 1类填充表td。因此，例如，如果用户保留默认选择5，则计算出的..price 1值为50。

这很好用。

但是，我需要将. <td> -1与其他几个类相加(即..price 2，..price 3，..price 4.)若要获得$值的总计，请将其显示在结果#中。

如何使用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

获取所有td元素，要么使用属性值包含选择器，要么通过tr的第二个td元素使用:nth-child()。现在，使用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方法，就像@建议的那样。

​

$('#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对象有一个直接属性，它引用匹配元素的数量。

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