jquery - 获取同一类的总和

Question

我有

<div id="english">
   <ul>
        <li>English</li>
        <li>Instructor Name</li>
        <li class="grade">85</li>
   </ul>
</div>

<div id="math">
    <ul>
        <li>Math</li>
        <li>Instructor Name</li>
        <li class="grade">80</li>
    </ul>
</div>

<div id="science">
    <ul>
        <li>Science</li>
        <li>Instructor Name</li>
        <li class="grade">90</li>
    </ul>
</div>
<p id="grade-sum">Sum of grade here</p>

我的问题是我将如何使用 jquery 获得该班级成绩的总和。总和应该是 255。

Answer 1

$(function() {
    var sum = 0;
    $('li.grade').each(function(){
        sum += parseInt(this.innerHTML, 10)
    })

    $('#grade-sum').text(sum);
})

Answer 2

使用 jQuery，您可以轻松地迭代并获得总和。

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

   $('#grade-sum').text(total_grade);
});​

检查这个小提琴

Answer 3

var sum = 0;
$("li.grade").each(function(index, element){
  sum += parseInt($(element).text());
});
console.log(sum);
alert(sum);

$('#grade-sum').text(sum)