我如何在jquery中的每个函数中将多个数字求和？

Question

我想对多个数字求和，但这不能与每个函数一起使用。

尝试了什么：-

totalPgCost();
function totalPgCost(){
var totalPgCost = 0;
$('.pgBookingTable tr').find('.pgCost').each(function(){
totalPgCost += $(this).val();
});
$('.totalPgCost').text(totalPgCost);
                    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>


<table class="pgBookingTable">
<tr><td><span class="pgCost">10000</span></td><tr>
<tr><td><span class="pgCost">5000</span></td><tr>
<tr><td>Total <span class="totalPgCost"></span> /-</td><tr>
</table>

为什么我会得到0？

答案将不胜感激！

Answer 1

您需要text而不是val。另外，由于没有关闭tr，因此html表未正确平衡。在添加将字符串转换为数字之前

totalPgCost();

function totalPgCost() {
  var totalPgCost = 0;
  $('.pgBookingTable tr').find('.pgCost').each(function() {
    totalPgCost += parseInt($(this).text().trim(), 10);
  });
  $('.totalPgCost').text(totalPgCost);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>


<table class="pgBookingTable">
  <tr>
    <td><span class="pgCost">10000</span></td>
  </tr>
  <tr>
    <td><span class="pgCost">5000</span></td>
  </tr>
  <tr>
    <td>Total <span class="totalPgCost"></span> /-</td>
  </tr>
</table>

如果您确定只有span会在thar表中具有该类，您也可以避免使用find

totalPgCost();

function totalPgCost() {
  var totalPgCost = 0;
  $('.pgBookingTable .pgCost').each(function() {
    totalPgCost += parseInt($(this).text(), 10);
  });
  $('.totalPgCost').text(totalPgCost);

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>


<table class="pgBookingTable">
  <tr>
    <td><span class="pgCost">10000</span></td>
  </tr>
  <tr>
    <td><span class="pgCost">5000</span></td>
  </tr>
  <tr>
    <td>Total <span class="totalPgCost"></span> /-</td>
  </tr>
</table>

Answer 2

使用.text

$('.pgBookingTable tr').find('.pgCost').each(function(){
   totalPgCost += parseInt($(this).text());
});

Answer 3

 totalPgCost();
    function totalPgCost(){
    var totalPgCost = 0;
    $('.pgBookingTable tr').find('.pgCost').each(function(){
      totalPgCost += parseInt($(this).text());
    });
    $('.totalPgCost').text(totalPgCost);
                        }

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>


    <table class="pgBookingTable">
    <tr><td><span class="pgCost">10000</span></td><tr>
    <tr><td><span class="pgCost">5000</span></td><tr>
    <tr><td>Total <span class="totalPgCost"></span> /-</td><tr>
    </table>

Answer 4

您可以在每个循环中直接使用pgCost，并使用text()而不是val()来获得希望的文本范围

totalPgCost();
function totalPgCost(){
var totalPgCost = 0;
$('.pgCost').each(function(){
totalPgCost += parseInt($(this).text());
});
$('.totalPgCost').text(totalPgCost);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>


<table class="pgBookingTable">
<tr><td><span class="pgCost">10000</span></td><tr>
<tr><td><span class="pgCost">5000</span></td><tr>
<tr><td>Total <span class="totalPgCost"></span> /-</td><tr>
</table>