jQuery遍历元素，按数据ID排序，并从具有匹配数据ID的元素中获取值

Question

我想做的是从相同的组ID中获取两个数据组分数值，并将它们加在一起：

https://jsfiddle.net/x0nyr9qn/51/

到目前为止我拥有的更新版本：

https://jsfiddle.net/x0nyr9qn/61/

HTML示例：

<div class="quiz-block-container">
  <div class="quiz-block-question" data-group-id="1" data-group-score="2">
  </div>
  <div class="quiz-block-question" data-group-id="1" data-group-score="3">
  </div>

  <div class="quiz-block-question" data-group-id="2" data-group-score="1">
  </div>
  <div class="quiz-block-question" data-group-id="2" data-group-score="3">
  </div>

  <div class="quiz-block-question" data-group-id="3" data-group-score="3">
  </div>
  <div class="quiz-block-question" data-group-id="3" data-group-score="1">
  </div>

  <div class="quiz-block-question" data-group-id="4" data-group-score="1">
  </div>
  <div class="quiz-block-question" data-group-id="4" data-group-score="1">
  </div>
</div>

我想要做的是通过类“ quiz-block-question”循环遍历各个块，获取数据组ID，然后通过其ID返回每个组的数据组得分，以便将它们加在一起来自该组内那些值的总得分，并针对每个组ID进行。

我一直在使用的JS示例及其当前状态，但认为我已经脱离了接近工作的范围，但这就是我目前拥有的。

JS（1）

$('.quiz-block-question').each(function() {
  var id = $(this).data('group-id');
  var score = $(this).data('group-score');
    var i = 0;

  $("[data-group-id='" + id + "']").each(function(index) {
    if(++i > 2) {
      return false;
    }
    //$(this).find('.group-id').text(id);
    //console.log("group: " + $(this).data('group-id'));
    //$(this).find('.group-score').text(score);
    //console.log("group score: " + $(this).data('group-score'));
    var first = $(this).data('group-score')[1];
    console.log(first);
    var second = $(this).data('group-score')[2];
    var total = first + second;
    $('.results').append("total:" + total);

  });
  //return false
});

JS（2）

$('.quiz-block-question').each(function(i) {
  var groupID = $(this).data("group-id");
  if ($(this).data('group-id') == i + 1) {
    //console.log(this);
    $("[data-group-id='"+i+"']").each(function() {
      console.log(this);
      var questionGroupID = $(this).data('group-id');
      $(this).each(function() {
        console.log("group score: "+$(this).attr('data-group-score'));
      });
    });
  }
});

Answer 1

听起来您只需要.map/reduce操作。 这将返回键/值对为id / total的对象。

 var q = document.querySelectorAll('.quiz-block-question'); var res = Array.from(q, el => ({id: el.dataset.groupId, score: +el.dataset.groupScore}) ).reduce((obj, d) => Object.assign(obj, {[d.id]: (obj[d.id] || 0) + d.score}) , {}); console.log(res); 

 <div class="quiz-block-container"> <div class="quiz-block-question" data-group-id="1" data-group-score="2"> </div> <div class="quiz-block-question" data-group-id="1" data-group-score="3"> </div> <div class="quiz-block-question" data-group-id="2" data-group-score="1"> </div> <div class="quiz-block-question" data-group-id="2" data-group-score="3"> </div> <div class="quiz-block-question" data-group-id="3" data-group-score="3"> </div> <div class="quiz-block-question" data-group-id="3" data-group-score="1"> </div> <div class="quiz-block-question" data-group-id="4" data-group-score="1"> </div> <div class="quiz-block-question" data-group-id="4" data-group-score="1"> </div> </div>