如何总结具有特定选择器名称开始的所有字段答案

【问题标题】：How to sum up all the fields with specific selector name start如何总结具有特定选择器名称开始的所有字段
【发布时间】：2017-04-06 19:08:56
【问题描述】：

我有许多跨度字段，其中包含文本格式的数字。这些字段具有相同名称的第一部分 singleprice-23、singleprice-24、singleprice-25 等。如何使用 jQuery 总结所有这些字段？对于名称开头相同的输入，我该如何做同样的事情？

【问题讨论】：

属性以选择器开头：[name^=”value”]
是的，我知道，但是如何总结这些字段中的所有值？
从 DOM 中获取它们，遍历集合并将值/解析的文本添加到变量 O.o
使用$.each([name^="value"])添加all selector的val()
Jquery find all ids starting with a string?的可能重复

标签： javascript jquery

【解决方案1】：

你可以：

找到所有id以singleprice开头的span
迭代每个跨度并求和其值

见下文：

var spans = $('[id^=singleprice]');
var sum = 0;

spans.each(function(index, value){
  sum += +($(value).html());
});

console.log(sum);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="singleprice-23">100</span>
<span id="singleprice-24">200</span>
<span id="singleprice-25">400</span>

【讨论】：

【解决方案2】：

var sum = 0;
$('[name^="singleprice"]').each(function() {
    sum += +$(this).attr('data-single-price');
});

此解决方案假定每个具有以“singleprice”开头的名称属性的元素也具有带有价格值的“data-single-price”属性。变量 sum 是所有这些值的总和。如果元素没有上述数据属性，那么您必须编写一个仅查看名称值的正则表达式。我想说添加 data-single-price 属性是一种更简单的解决方案，但这当然取决于您的项目。

【讨论】：

【解决方案3】：

遍历名称以“singleprice”开头的所有元素，获取文本/值，修剪，将其转换为数字并添加到 sum 变量。

对跨度求和：

var sum = 0;
$('[name^="singleprice"]').each(function(){
    sum += +$.trim( $(this).text() );
})

输入：

var sum = 0;
$('[name^="singleprice"]').each(function(){
    sum += +$.trim( $(this).val() );
})

【讨论】：

【解决方案4】：

Array.prototype.reduce() 结合Array.prototype.map() 可用于计算总数：

var sum = [].map.call(document.querySelectorAll('span'), function(o) {
  return parseInt(o.textContent, 10);
}) // <----will return you the array [5,5,5,5,5]
.reduce(function(acc, val) { // <---will iterate over array and add values
  return acc + val;
}, 0);

console.log(sum);

&lt;span&gt;5&lt;/span&gt;,&lt;span&gt;5&lt;/span&gt;,&lt;span&gt;5&lt;/span&gt;,&lt;span&gt;5&lt;/span&gt;,&lt;span&gt;5&lt;/span&gt;

【讨论】：