主页 / 问题 / 1087251
Accepted
Develop
Asked:2020-02-25 21:26:09 +0000 UTC2020-02-25 21:26:09 +0000 UTC

如何用一个类遍历所有元素并计算它们的总和？

  • 772

我正在尝试用价格类计算 div 中所有文本的总和，我该怎么做？以及如何从 div 中删除空格和多余的文本？

<div class="price">100руб</div>
<div class="price">100руб</div>
<script>
    var price=0;
    $('.price').each( function(i) {
        price += Number($(this).textContent);
        document.write(price);
    });
 </script>
javascript

2 个回答

  1. Best Answer

    错误：

    1. 结果应该在循环之后显示，而不是在里面
    2. 在循环中， eachthis等于当前HTML 元素。这个元素有一个textContent. 如果包装this在一个jQuery元素( $(this)) 中，那么您将不再拥有一个属性textContent，而是拥有一个方法text()。所以要么this.textContent，要么$(this).text()。

    以及如何从 div 中删除空格和多余的文本？

    如果您总是先有一个数字（可能带有前导空格），然后是一些文本，那么您可以使用该功能parseInt()

    jQuery(function($) {
  var price = 0;
  $('.price').each(function() {
    price += parseInt(this.textContent);
  });
  console.log(price);
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="price">100руб</div>
<div class="price">100руб</div>

    或者没有 jQuery 的纯 JS

    var price = 0;
document.querySelectorAll('.price').forEach(function(el) {
  price += parseInt(el.textContent);
});
console.log(price);
    <div class="price">100руб</div>
<div class="price">100руб</div>

    • 3

  2. 由于 div 具有混合内容（数字 + 字母），您可以使用拆分“咬掉”字母部分：

    var price=0;
$('.price').each( function(i) {
  price += +$(this).text().split('р')[0];
});
console.log(price);
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="price">100руб</div>
<div class="price">100руб</div>

    • 2

相关问题