Question

我有以下动态显示的等级

我想在加载数据后计算总成绩。

    <div class="grade" id="grade-1">70</div>
    <div class="grade" id="grade-2">90</div>
    <div class="grade" id="grade-3">80</div>
    <div class="grade" id="grade-4">60</div>
    <div class="grade" id="grade-5">90</div>
    <div class="grade" id="grade-6">80</div>
    <div class="grade" id="grade-7">80</div>
    <div class="grade" id="grade-8">60</div>
    <div class="grade" id="grade-9">90</div>
    .............
    .............

使用javascript我想计算这个总数，成绩数是动态的。帮助我。

Answer 1

您可以使用.each()遍历所有元素：

 var gradesum=0;
 $('.grade').each(function(){gradesum+= parseInt($(this).text());});
 alert(gradesum);

<强> Working Demo

Answer 2

您可以执行以下操作：

var total_grade = 0;

$('.grade').each(function() {
    total_grade += parseInt($(this).text());
});

console.log(total_grade);

希望这有帮助。

Answer 3

您也可以使用javascripts reduce功能作为替代方案：

var grades = document.querySelectorAll(".grade"),
    grades = Array.prototype.slice.call(grades);

var total = grades.reduce(function(previous, current, index, array){
    return parseInt(previous, 10) + parseInt(array[index].textContent, 10);
}, 0);

这里有一些注意事项：

由于querySelectorAll返回节点列表，我们必须使用Array.prototype.slice将结果转换为正确的数组。
不要忘记parseInt上的基数。
为了清晰和可读性，我完全打破了这一点。
这是一个纯粹的javascript示例，但使用jQuery很容易适应。

示例：http://jsfiddle.net/BTvsL/

正如评论中所指出的，您可以通过合并map和reduce来做类似的事情：

var grades = document.querySelectorAll(".grade");
    grades = Array.prototype.slice.call(grades);

var total = grades.map(function(el){
    return parseInt(el.textContent, 10);
}).reduce(function(previous, current){
    return previous + current;
}, 0);

示例2：http://jsfiddle.net/BTvsL/1/

注意：如果您需要根据浏览器要求在.innerHTML与.innerText之间进行测试，可以通过测试每个版本并默认为0来执行此操作： < / p>

var text = el.textContent || el.innerText || 0;

Answer 4

var total = 0;

$("div.grade").each(function() { total += parseFloat($(this).html()); } );

Answer 5

Demo

您可以选择具有.grade类的所有元素。并对文本求和

var total=0;
    $(".grade").each(function(){

       total+= +$(this).text();

    });
    alert(total);

Answer 6

对于兼容ES5和最新W3C规格的浏览器，您可以一次性获得总和：

var sum = $('div.grade').map(function() {
    return +this.textContent || 0;  // || 0 to cope with any NaNs
}).get().reduce(function(a, b) { return a + b }, 0);

即。获取元素及其文本内容的数值（与IE9 +兼容），将其转换为本机数组，然后使用ES5标准函数Array.prototype.reduce计算这些值的总和。

Answer 7

另一种方法是使用jQuery .map()和javascript .reduce()

var total = $('.grade').map(function(){
        return $(this).text()*1; // to make sure this is a number 
    }).get().reduce(function(a, b) {
        return a + b;
    });
alert(total);

demo

需要javascript来计算成绩

7 个答案: