[英]jQuery looping through elements, sorting by data-id and grabbing values from elements with matching data-id
我想做的是從相同的組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'));
});
});
}
});
聽起來您只需要.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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.