javascript - 按值分组的数据属性计算其他数据属性的总和

Question

我正在尝试计算每个省中的所有huishoudens。对于这个问题，我创建了一个 fiddle ，可以在这里找到:http://jsfiddle.net/Lyf1sak3/1/

使用此示例数据:

<div data-provincie="Noord-Holland" data-huishoudens="102"></div>
<div data-provincie="Noord-Holland" data-huishoudens="1250"></div>
<div data-provincie="Zuid-Holland" data-huishoudens="956"></div>
<div data-provincie="Zuid-Holland" data-huishoudens="235"></div>
<div data-provincie="Groningen" data-huishoudens="495"></div>
<div data-provincie="Groningen" data-huishoudens="55"></div>
<div data-provincie="Groningen" data-huishoudens="247"></div>
<div data-provincie="Utrecht" data-huishoudens="123"></div>
<div data-provincie="Utrecht" data-huishoudens="675"></div>

这段代码:

var provincies = {},
    provincie;
    sum = 0;
$('*[data-provincie]').each(function(i, el){
    provincie = $(el).data('provincie');
    
    if (provincies.hasOwnProperty(provincie)) {

        provincies[provincie] += 1;
        sum += $(this).data('huishoudens');

    }
    else {
        provincies[provincie] = 1;
    }
});

// print results
$('#result').append('<hr>');
for(var key in provincies){
    $('#result').append(key + ' (' + provincies[key] + '|' + sum + ')<br>');
}

我按每个省的属性对每个省进行分组，现在我只需要计算其他数据属性，但我完全被困在这里。我得到的结果是 675(样本数据中的最后一个 div)，或者得到 2462，但我不知道它是如何得到该数字的。

我需要修改什么才能得到这个结果:

Noord-Holland (2|1352)
Zuid-Holland (2|1191)
Groningen (3|797)
Utrecht (2|798)

无论您给出什么答案，我们都非常感激，但请不要在需要硬编码 provincie 名称的地方发布答案，例如 $('*[data-provincie="Noord -荷兰"]');

Answer 1

如果你之前知道provincie，那么你可以创建一个包含所有provincie的数组，然后你可以用它作为键来与所有div进行比较 如果匹配，您可以将相同的内容添加到 sum 变量中，最后将最终结果附加到您的 result div 中。

演示代码:

//all data provinces
//var json_ = ["Noord-Holland", "Zuid-Holland", "Groningen", "Utrecht"]
var json_ = [];
$('*[data-provincie]').each(function(i, el) {
//check if in array or not
  if ($.inArray($(this).data('provincie'), json_) < 0) {
    json_.push($(this).data('provincie'));//push same
  }

});
console.log(json_)
sum = 0;
count = 0;
//loop through keys
for (var key in json_) {
  $('*[data-provincie]').each(function(i, el) {
    var provincie = $(el).data('provincie');
    //if key matches
    if (json_[key] == provincie) {
      sum += $(el).data('huishoudens');
      count++;
    }
  });
  //append result
  $('#result').append(count + ' (' + json_[key] + '|' + sum + ')<br/>')
  count = 0;
  sum = 0 //change sum to 0 again
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div data-provincie="Noord-Holland" data-huishoudens="102"></div>
<div data-provincie="Noord-Holland" data-huishoudens="1250"></div>
<div data-provincie="Zuid-Holland" data-huishoudens="956"></div>
<div data-provincie="Zuid-Holland" data-huishoudens="235"></div>
<div data-provincie="Groningen" data-huishoudens="495"></div>
<div data-provincie="Groningen" data-huishoudens="55"></div>
<div data-provincie="Groningen" data-huishoudens="247"></div>
<div data-provincie="Utrecht" data-huishoudens="123"></div>
<div data-provincie="Utrecht" data-huishoudens="675"></div>

<div id="result"></div>