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

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[]并且它正在工作。

现在我想过滤掉它。

我有一些不同的类，如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 。

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 答案，其中包含一个链：

• jQuery 的 $(selector, context)
• jQuery 的 .map() 方法
• jQuery 的 .get() 方法
• Array.prototype.reduce()

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

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()三种方式

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

    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');

2. 数组中的所有总和：-

    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)

3. 所有的总和加起来就是一个总计：-

    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