[英]jQuery looping through elements, sorting by data-id and grabbing values from elements with matching data-id
What I am trying to do is grab the two data-group-score values from the same group-ids and add them together: 我想做的是从相同的组ID中获取两个数据组分数值,并将它们加在一起:
https://jsfiddle.net/x0nyr9qn/51/ https://jsfiddle.net/x0nyr9qn/51/
Updated version I have got with so far: 到目前为止我拥有的更新版本:
https://jsfiddle.net/x0nyr9qn/61/ https://jsfiddle.net/x0nyr9qn/61/
Sample HTML: 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>
What I am trying to do is loop through the blocks with class "quiz-block-question" grab the data-group-id, then return the data-group-score for each group by its ID so I can add them together for a total score from those values within that group, and do so for each group-id. 我想要做的是通过类“ quiz-block-question”循环遍历各个块,获取数据组ID,然后通过其ID返回每个组的数据组得分,以便将它们加在一起来自该组内那些值的总得分,并针对每个组ID进行。
The JS examples I've been playing with and their current states but think I drifted away from something closer to working, but here is what I currently have. 我一直在使用的JS示例及其当前状态,但认为我已经脱离了接近工作的范围,但这就是我目前拥有的。
JS (1) 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) 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'));
});
});
}
});
Sounds like you just want a .map/reduce
operation. 听起来您只需要.map/reduce
操作。 This returns an object with key/value pairs of id/total. 这将返回键/值对为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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.