Question

基本上，我需要计算<td>标签内的几个数字的总和。但是，我最终得到了一个串联字符串：513，而不是18。

HTML

<div class='all'>Sum: </div>

<table>
    <tr>
        <td>5</td>
    </tr>
    <tr>
        <td>13</td>
    </tr>
</table>

的jQuery

$('tbody').find('tr').each(function() {
    var sumCell = $(this).find('td');
    if(sumCell.text() != 20) {
        var str = sumCell.text();
        $('.all').append(array_sum(str.split(' ')));
    }
});

这是JSFiddle，我尝试使用array_sum()。

Answer 1

我建议：

// setting the text of the '.all' element(s):
$('.all').text(function() {
         // selecting all the '<td>' elements,:
  return $('td').map(function() {
    // converting the text to a number:
    var n = parseFloat($(this).text());
    // if the text is not a number, or the text (as a number) is equal to 20
    // we return 0 (effectively not adding the value), otherwise we return the
    // number:
    return (!n || n === 20) ? 0 : n;
  // get() converts that collection to an array,
  // reduce reduces the array to a single value (in this case by adding its
  // components together):
  }).get().reduce(function(a, b) {
    return a + b;
  });
});

＆＃13;

$('.all').text(function() {
  return $('td').map(function() {
    var n = parseFloat($(this).text());
    return (!n || n === 20) ? 0 : n;
  }).get().reduce(function(a, b) {
    return a + b;
  });
});

＆＃13;

div.all {
  border-bottom: 1px solid #000;
  margin-bottom: 0.5em;
}

div.all::before {
  content: 'Result: ';
  color: #777;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='all'>Sum:</div>

<table>
  <tbody>
    <tr>
      <td>5</td>
    </tr>
    <tr>
      <td>13</td>
    </tr>
    <tr>
      <td>20</td>
    </tr>
  </tbody>
</table>

＆＃13;

参考文献：

JavaScript的：
- Array.prototype.reduce()。
- Conditional ('ternary') operator。
- parseFloat()。
jQuery的：
- get()。
- map()。

Answer 2

请参阅http://jsfiddle.net/5wvwC/25/

var nums = [];
    $('tbody').find('tr').each(function() {
        var sumCell = $(this).find('td');
        if(sumCell.text() != 20) {
            var str = sumCell.text();
            nums.push(str);
        }
    });
$('.all').append(array_sum(nums));

您的代码不起作用，因为在每个代码中都添加了一个td值。每次迭代都采用单个td的值并附加到.all。您需要获取所有td值，然后将它们一起添加。

Answer 3

我认为这让事情变得复杂了。我会有一个期望数字的和函数。您可以传递函数所期望的内容：

function array_sum(array) {
    return array.reduce(function (a, b) {
        return a + b
    })
}

然后你可以把所有数字都拿到一个数组中：

var ns = $('tbody').find('tr td').map(function () {
    return Number($(this).text()); // make sure it's a number
}).toArray();

最后使用array_sum添加它们并附加到输出：

$('.all').append(array_sum(ns));

DEMO： http://jsfiddle.net/5wvwC/26/

通过jQuery查找数字总和

3 个答案: