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

我的问题很简单，假设您有多个类似这样的

元素

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

10000
20,000
40,000
500,000

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

这就是我想要实现的目标

//数据将从类为HI的Span标记中获取

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

 <div id=theans></div>

var addthevalue=10000+20000+40000+500000；
$（#theans）.html（addthevalue）；

试试这个：

const sum=Array.from（document.getElementsByClassName（'hi'））
.map（el=>parseFloat（el.textContent.replace（/[^0-9\.]/g'））
.减少（（总，电流）=>总+电流）；
document.getElementById（'sum'）.innerHTML='sum:${sum.toLocaleString（）}`
10000
20,000
40,000
500,000.01
虽然不是最简洁的方法，但这是一种方法：

您可以获取元素并使用正则表达式解析任何非数字的内容，然后将其添加到跟踪总数的变量中


const elements=document.querySelectorAll（'.hi'）；
设total=0；
元素。forEach（（el，i）=>{
const val=el.innerHTML.replace（/[^0-9]/，“”）；
总计+=解析整数（val）；
});
控制台日志（“总计：”，总计）
10000
20,000
40,000
500000
您可以在
querySelectorAll
上使用扩展语法来获取数组，然后可以使用
reduce
方法来计算和


const sum=[…document.queryselectoral（'span'）].reduce（（r，e）=>{
返回r+parseInt（e.textContent.replace（'，'，''）
}, 0)
console.log（总和）
10000
20,000
40,000
500000
通过使用正则表达式去掉逗号，您可以轻松做到这一点。完成后，基本上只需对值进行求和-
Array.prototype.reduce
是实现这一点的简单方法。最后，获得正确的总和后，使用另一个正则表达式函数将其转换为格式正确的字符串逗号。有关详细信息，请参见代码注释：


//Util函数
常量stripCommas=s=>s.replace（/，/g'，）；//用于从字符串中删除逗号的Util函数
常量numberToFormattedString=n=>n.toString（）.replace（/\B（？=（\d{3}）+（？！\d））/g，“，”；
//以数字的形式求和
const sum=Array.from（document.querySelectorAll（'.hi'）//收集DOM元素的数组
.map（el=>Number（stripCommas（el.innerText））//去掉逗号并转到数字
.减少（（总和，n）=>总和+n，0）；//使用reduce对数字求和
//将数字转换为格式化字符串
常量sum，带逗号=NumberFormattedString（总和）；
console.dir（带逗号的sum）
10000
20,000
40,000
500000
解决方案的核心是（就像大多数其他答案一样）
Array.prototype.reduce（）
，但是，由于其他人都忽略了标记，我将尝试：


const total=[…$（'.hi'）].reduce（（sum，span）=>sum+=+$（span.text（）.replace（/\，/g'，），0）
$（'sum'）。文本（总计）

10,000
20,000
40,000
500,000
总的是：如果jQuery解决方案是你要找的，你可以考虑一下。只需注意IE不支持扩展语法。以防OP需要关心IE兼容性。@Yunhai:既然我们说的是为了行尸走肉的IE兼容性而丑化自己的代码，它还将在箭头函数表示法上绊倒。@YevgenGorbunkov-如果OP需要确保IE中的代码函数，那么使用诸如Babel之类的transpiler可能是这里的解决方案。虽然我同意IE是垃圾，但在该浏览器中，代码按预期工作可能仍然很重要（因为任何穴居人都在使用它）。@NenadVracar非常喜欢你的答案。但如果有多个逗号，则会出现问题。也许你想用
替换（“，”，“）
。替换（/，/g），”
来确保所有逗号都被删除。我不会投反对票，但这一次将无法处理数字，比如
100000000
（例如，有多个逗号），我甚至不会说
10000.50
。@yevgengorbunkov谢谢，我对他的答案进行了编辑，用total+=parseInt（$（this.html（）.replace（/\D/g'））清除了任何不是数字的内容；而不是total+=parseInt（$（this.html（）.replace（'，'，''）@沙沙：嗯，我必须说，你在建议的解决方案中选择了最差的一个（与基于
reduce（），因此，您的代码现在将无法处理浮点数。如果您所追求的是干净灵活的jQuery解决方案，那么您应该选择。如果OP关心性能，使用
GetElementsByCassName（）
+
textContent
而不是
querySelectorAll（）
+
innerHTML
，上述代码可以更快地工作。此外，如果出现浮点数，您的
replace（）
将弄乱浮点数。另一点是，由于我们不在typescript的世界中，
total+=+val
要短得多（尽管你可能会发现它很狡猾）。这是一个公平的观点。我不是特别关注性能，但我会编辑以反映这个建议。哎呀，你完全正确。我只是忘了把它加进去。你仍然在使用
innerHTML
修改
：）的文本内容。你可能想签出，以调整你的模式；）快乐编码。
var total = 0;
$(".hi").each(function() {
    total += parseInt($(this).html().replace(",", ""));
});
$("#theans").html(total);