按类别的总数据属性值答案

【问题标题】：Total data attribute values by category按类别的总数据属性值
【发布时间】：2015-01-18 19:06:25
【问题描述】：

我正在尝试使用 jQuery 从列表中按数据属性名称查找总金额组。类似于对类别进行分组并求总和。

例如，我想创建这样的东西：

group1 = 3
group2 = 5
group3 = 3

从此列表中：

<span class="data-center" data-category="group1" data-amount="1"></span>
<span class="data-center" data-category="group2" data-amount="1"></span>
<span class="data-center" data-category="group2" data-amount="2"></span>
<span class="data-center" data-category="group1" data-amount="2"></span>
<span class="data-center" data-category="group2" data-amount="2"></span>
<span class="data-center" data-category="group3" data-amount="3"></span>

我想知道是否有一些 jQuery 函数帮助来实现它，比如groupByName()？

【问题讨论】：

请努力并展示您的尝试。
关于您的问题：不，没有。关于“如何做到”：您仍然使用对象作为 Hashtable 进行计算。
@isherwood：我尝试创建一个数组并存储类别名称和每个值。然后每次，我都要循环回来检查是否有一个现有的组，如果有，我会更新值。很好，但我认为会有更好的解决方案。
@Regent;有趣的是，我从来不知道 jquery 支持哈希表。感谢您的信息。
@Joe209 1. 不是 jQuery，而是纯 JavaScript。 2. 不是哈希表而是对象，可以作为哈希表模拟。不客气。

标签： javascript jquery

【解决方案1】：

使用纯 JavaScript：

Example Here

function getCategoryTotal(cat) {
    var total = 0,
        elements = document.querySelectorAll('[data-category="' + cat + '"]');

    Array.prototype.forEach.call(elements, function (el, i) {
        total += parseInt(el.dataset.amount, 10);
    });

    return total;
}

console.log(getCategoryTotal('group1')); // 3
console.log(getCategoryTotal('group2')); // 5
console.log(getCategoryTotal('group3')); // 3

【讨论】：

嗯，document.querySelectorAll() 不是 纯 JavaScript，但无论如何。我真正想说的是：更灵活的解决方案如何，它适用于任意数量的组？类似this question 或this one。
@Regent document.querySelectorAll() 怎么不是纯JS？我的印象是。你会把它归类为什么？它没有按照 OP 的要求使用 jQuery..
纯 JS 和 HTML DOM 接口（可以从不同的编程语言访问）之间没有明显区别，我同意，但它仍然在这里：

【解决方案2】：

我猜你问了一个 jQuery 的方法，我做到了：

$.fn.amountByData = function(dataAttr, amountDataAttr) {
    if (typeof amountDataAttr == "undefined")
        amountDataAttr = "amount";

    var dataAmountArr = new Array();

    $(this).each(function() {
        var dataAttrVal = $(this).data(dataAttr);

        if (typeof dataAmountArr[dataAttrVal] == "undefined")
            dataAmountArr[dataAttrVal] = parseInt($(this).data(amountDataAttr));
        else 
            dataAmountArr[dataAttrVal] += parseInt($(this).data(amountDataAttr));
    });

    return dataAmountArr;
};

这是我将如何实现它的 jQuery 方式！这提供了 LOT 的灵活性，因为您可以选择要根据哪个数据属性计算金额，如果未命名为 @987654322，您还可以选择精确不同的金额数据属性@。

PS：我知道已经选择了一个答案，但与@Josh Crozier 不同，我知道你想要一个 jQuery 方法来实现你的目标。

干杯，

【讨论】：