javascript - 使用 JavaScript 或 jQuery 获取具有相同类的所有 DOM 节点的总和

Question

这个问题已经有答案了:

JQuery total sum of multiple html table cells with specific class (1 个回答)

已关闭 3 年前。

我的问题很简单，假设您有多个 <span>像这样的元素

 <span class="hi">10,000</span>
 <span class="hi">20,000</span>
 <span class="hi">40,000</span>
 <span class="hi">500,000</span>

如何获取span标签内的每个数字内容，去掉逗号并添加数字得到答案并添加逗号，因为我似乎无法找到一种方法来做到这一点。

这就是我想要实现的目标

//数据将从具有HI类的Span标签中获取

<script> 
var addthevalue = 10000+20000+40000+500000;
$(#theans).html(addthevalue);
</script>

 <div id=theans></div>

Answer 1

您可以在 querySelectorAll 上使用展开语法来获取数组，然后可以使用 reduce 方法来计算总和。

const sum = [...document.querySelectorAll('span')].reduce((r, e) => {
  return r + parseInt(e.textContent.replace(',', ''))
}, 0)

console.log(sum)

<span class="hi">10,000</span>
<span class="hi">20,000</span>
<span class="hi">40,000</span>
<span class="hi">500,000</span>