javascript - jQuery 循环遍历元素，按 data-id 排序并从具有匹配 data-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”类的 block ，获取数据组 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>