按类别分列的数据属性值总数

Question

我正在尝试使用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()

Answer 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

Answer 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方式！这提供了一个的灵活性，因为您可以选择要根据哪个数据属性计算金额，如果它没有命名为amount，也可以选择精确一个不同的and数据属性。

PS:我知道已经选择了一个答案，但与@乔希·克罗泽相反，我知道你想要一个jQuery方法来实现你的目标。

干杯,