如何使用 js 或 jQuery 添加来自不同 div 类的值答案

【问题标题】：How to add values from different div classes using js or jQuery如何使用 js 或 jQuery 添加来自不同 div 类的值
【发布时间】：2016-10-21 01:01:29
【问题描述】：

我有一个具有不同<td> 类名的表。我需要将这些中的每一个相加/求和以获得一个总值。如果它们都具有相同的类名，我可以轻松地做到这一点，但我不知道如何使用不同的类来做到这一点。因此，在下面的表格示例中，我需要添加 .price1 + .price2 + .price3 并将结果显示在#result 中。

HTML：

    <table id="tableOrderTotal" class="table tableTotal">
      <tbody>
        <tr>
         <td>Item1</td>
         <td class="price1">5</td>
        </tr>
        <tr>
         <td>Item2</td>
         <td class="price2">15</td>
        </tr>
        <tr>
         <td>Item3</td>
         <td class="price3">25</td>
        </tr>         
        <tr class="summary">
         <td class="totalOrder">Total:</td>
         <td id="result" class="totalAmount"></td>
        </tr>                                 
     </tbody>
   </table>

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

试试这个选择器，使用通配符

$("[class^=price]")

代码是

var result=0;
$("[class^=price]").each(function(e,i){result+=parseInt(i.innerHTML)});
console.log(result) // u get to see the result in console

【讨论】：

【解决方案2】：

最简单的方法是添加一些数据属性或类，但我认为您不能这样做。所以很少有可能的解决方案，例如我们可以通过tr 做选择器并在tr 中获取每个最后一个td 或通过正则表达式做选择器。这里是示例代码。

//solution with selector by tr
var sum=0;
$('tr:not(.summary)').each(function() {

   
    sum+=parseInt( $(this).find("td").last().text() );
     
});

$("td#result").text(sum);

//second possibile solution is to do regular expression selector 
//( get every element with class starting by "price")
var sum=0;
$('td[class^=price]').each(function() {

   
    sum+=parseInt( $(this).text() );
     
});
$("td#result2").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="price1">5</td>
        </tr>
        <tr>
         <td>Item2</td>
         <td class="price2">15</td>
        </tr>
        <tr>
         <td>Item3</td>
         <td class="price3">25</td>
        </tr>         
        <tr class="summary">
         <td class="totalOrder">Total:</td>
         <td id="result" class="totalAmount"></td>
        </tr>    
        <tr class="summary">
         <td class="totalOrder">Total second solution:</td>
         <td id="result2" class="totalAmount"></td>
        </tr>                               
     </tbody>
   </table>

【讨论】：

您的第二个选项几乎可以工作 - 但是我使用的 td 类之一是从选择（下拉）菜单中的计算计算值填充的，并且该值不包含在总和中计算。基本上，当从我的选择菜单中选择一个值时，我有一些 js 将所选值乘以指定的数字并用这个计算值填充 .price1 td 类。此值未包含在总和 (#result) 中。其他的都包含在内，但 .price1 的计算值不是。有什么想法吗？
我再次使用您的选项 #2 代码，当我包含计算出的 .price1 值时，我得到了 NaN 结果。当另一个类由单独的 js 函数填充时，如何对不同的类进行求和？计算 .price1 的 js 运行良好 - 它根据用户从下拉列表中的选择来计算它 - 并且它填充 .price1 就好了。但是，.price1 不会使用您提供的代码求和。任何帮助将不胜感激。再次感谢。

【解决方案3】：

一个更简单的建议是创建一个属性和一些属性，比如...

<td class="price1" to-sum>5</td>
<td class="price2" to-sum>5</td>
<td class="price3" to-sum>5</td>

然后按属性选择。

$(document).ready(function() {
    var total = 0;
    $('td[to-sum]').each(function(item) {
        total += parseFloat($(this).text());
    })

    $("#result").html(total);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="tableOrderTotal" class="table tableTotal">
    <tbody>
        <tr>
            <td>Item1</td>
            <td class="price1" to-sum>5</td>
        </tr>
        <tr>
            <td>Item2</td>
            <td class="price2" to-sum>15</td>
        </tr>
        <tr>
            <td>Item3</td>
            <td class="price3" to-sum>25</td>
        </tr>
        <tr class="summary">
            <td class="totalOrder">Total:</td>
            <td id="result" class="totalAmount"></td>
        </tr>
    </tbody>
</table>

【讨论】：

【解决方案4】：

您可以使用以下代码片段。

<script>

    $(function(){
        var sum = 0;
        $('[class^="price"]').each(function(){
            sum = sum + parseInt($(this).html());
        });
        $('[class$="totalAmount"]').html(sum);
    })

</script>

它基本上是在每个class 以前缀price 开头的td 中获取文本，然后将它们全部添加。

最后，它将您的totalAmount td 的text 设置为之前获得的总和。

我希望，它会有所帮助。

【讨论】：

【解决方案5】：

考虑到您所有的<td> html 值都是数字，使用 jQuery：

$(document).ready(function(){
  var total = 0;  
  total += $('#tableOrderTotal .price1').html();
  total += $('#tableOrderTotal .price2').html();
  total += $('#tableOrderTotal .price3').html();
  $("#result").html(total);
})

【讨论】：