如何获取特定名称项的特定 class 的总和

Question

目前我有

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[]，它正在运行。

现在我想把它过滤掉。

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

我想要的是根据他们的特定 class.

获得相关 blog_linkm_one[] 的总和

例如

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

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

Answer 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" >

Answer 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

如何获取特定名称项的特定 class 的总和

How to get sum of particular class for particular name items

javascript

jquery

javascript-objects