如何获取特定名称项目的特定类的总和答案

【问题标题】：How to get sum of particular class for particular name items如何获取特定名称项目的特定类的总和
【发布时间】：2021-11-10 20:21:56
【问题描述】：

目前我有

var cost = document.getElementsByName('blog_linkm_one[]');
            
for (var i = 0; i < cost.length; i++) {
  sum += parseFloat(cost[i].value);
}

这个函数给了我所有text box名称的总和为blog_linkm_one[]，它正在工作。

现在我想过滤掉它。

我有一些不同的类，如 appending_div0、appending_div1、appending_div2，所有这些类都有文本框名称 sd blog_linkm_one[]。

我想要的是根据他们的特定班级获得相关blog_linkm_one[] 的总和。

例如

appending_div0 类有 3 个文本框 blog_linkm_one[]。它们的值是1, 2, 3，所以它们的总和必须是6

appending_div1 类有 5 个文本框 blog_linkm_one[]。它们的值是1，2，3，5，9，所以它们的总和必须是20。

【问题讨论】：

不要描述 HTML，请将其添加到问题中。然后我们可以从中创建一个工作示例。
抱歉，我不太明白这个问题。您有不同的 HTML 标记，它们可以具有这些 css 类之一。并且所有具有 name="blog_linkm_one[]" 的文本框都有数字作为值？

标签： javascript jquery javascript-objects

【解决方案1】：

可能的答案之一......

const cls = ['appending_div0','appending_div1','appending_div2']

let sum = { any:0 }

document.querySelectorAll('input[name="blog_linkm_one[]"]').forEach(el=>
  {
  sum.any += parseFloat(el.value)

  cls.forEach(cl=>
    {
    if (el.classList.contains(cl))
      {
      sum[cl] = (sum[cl] ?? 0) + parseFloat(el.value)
      }  
    })
  })

console.log( sum )

<input type="text" name="blog_linkm_one[]" class="" value="10000" >
<input type="text" name="blog_linkm_one[]" class="appending_div0" value="1" >
<input type="text" name="blog_linkm_one[]" class="appending_div0" value="2" >
<input type="text" name="blog_linkm_one[]" class="appending_div0" value="3" >

<input type="text" name="blog_linkm_one[]" class="appending_div1" value="1" >
<input type="text" name="blog_linkm_one[]" class="appending_div1" value="2" >
<input type="text" name="blog_linkm_one[]" class="appending_div1" value="3" >
<input type="text" name="blog_linkm_one[]" class="appending_div1" value="5" >
<input type="text" name="blog_linkm_one[]" class="appending_div1" value="9" >
<input type="text" name="blog_linkm_one[]" class="appending_div2" value="4" >
<input type="text" name="blog_linkm_one[]" class="appending_div2" value="5" >
<input type="text" name="blog_linkm_one[]" class="appending_div2" value="6" >
<input type="text" name="blog_linkm_one[]" class="" value="20000" >

【讨论】：

【解决方案2】：

问题被标记为 [jQuery]，所以这里有一个（部分）jQuery 答案，其中包含一个链：

这是您的基本实用程序：-

function filterAndSummate(elements, className) {
    return $(`.${className}`, elements) // filter
    .map((i, element) => parseFloat($(element).val())) // map filtered elements to values
    .get() // convert jQuery object to Array
    .reduce((x, value) => x + value, 0); // summate the values
}

现在您可能想通过三种方式致电filterAndSummate()

每个总和作为一个单独的变量：-

    var costElements = document.getElementsByName('blog_linkm_one[]');
    let cost_1 = filterAndSummate(costElements, 'appending_div0');
    let cost_2 = filterAndSummate(costElements, 'appending_div1');
    let cost_3 = filterAndSummate(costElements, 'appending_div2');

数组中的所有总和：-

    var costElements = document.getElementsByName('blog_linkm_one[]');
    let costs = ['appending_div0', 'appending_div1', 'appending_div2'] // array of classNames
                .map(className => filterAndSummate(costElements, className)); // map to array of costs (one per className)

所有总和相加得出一个总计：-

    var costElements = document.getElementsByName('blog_linkm_one[]');
    let grand_total = ['appending_div0', 'appending_div1', 'appending_div2'] // array of classNames
                      .map(className => filterAndSummate(costElements, className)) // map to array of costs (one per className)
                      .reduce((x, c) => x + c, 0); // summate all the costs to get a grand-total

【讨论】：