如何计算同一类的两个平均值，并获得两个输出

Question

我陷入了困境。我正在为我的学校成绩制作一个插件来计算平均值。(avarage可能看起来很糟糕，但这就是我们的脚泥的工作方式。显示成绩的学校网站使用相同的班级名称。到目前为止，我知道如何计算 1 部分的平均值。

但是有没有办法在querySelectorAll中调用 2 个类，就像这样：[0]、[1]？

<script
            var matches = document.querySelectorAll(".course_eval_cell");
            console.log(matches);
            let up = 0;
            let down = 0;
            matches.forEach(function(fraction) {
                var divided = fraction.innerHTML.split("/");
                console.log(divided);
                up += parseInt(divided[0]);
                down += parseInt(divided[1]);
                console.log(up);
                console.log(down);
            });
            var result =   (up / down ) * 100  
            console.log(result);
            var result_fixed = result.toFixed(1) + "%";
            console.log(result_fixed);
            document.write('<p id="jstext">' + result_fixed + '</p>');
</script>

<div class="course_eval_row cf" style="width:770px;">
    <div class="course_eval_cell hasGrade" smsctip="true">10/10</div>
    <div class="course_eval_cell hasGrade  ">88/100</div>
</div>  
<div class="course_eval_row cf" style="width:770px;">
    <div class="course_eval_cell hasGrade" smsctip="true">4/10</div>
    <div class="course_eval_cell hasGrade  ">34/50</div>
</div>                              

我期待两个不同的结果，一年级的平均值和二年级的平均值。谢谢你的时间。

Answer 1

你可以这样做

<script>
    var matches = document.querySelectorAll(".course_eval_row");
    console.log(matches);    
    matches.forEach(function(fraction) {
      var subNodes = fraction.querySelectorAll(".course_eval_cell");
      let up = 0;
      let down = 0;
      subNodes.forEach(function(sub) {
          var divided = sub.innerHTML.split("/");
          console.log(divided);
          up += parseInt(divided[0]);
          down += parseInt(divided[1]);
          console.log(up);
          console.log(down);
        });
      var result =   (up / down ) * 100  
      console.log(result);
      var result_fixed = result.toFixed(1) + "%";
      console.log(result_fixed);
      document.write('<p id="jstext">' + result_fixed + '</p>');
    });
</script>

Answer 2

我认为需要这样的东西：

const calculateAverage = (elem) => {
  const arrGrade = Array.from(elem.querySelectorAll('.hasGrade')).map(({innerText: txt})=> {
    const score = txt.split('/')[0];
    const max = txt.split('/')[1];
    return score/max;
  });
  return arrGrade.reduce((a,v) => a+=v)/arrGrade.length;
};
var matches = document.querySelectorAll(".course_eval_row");
matches.forEach(m => {
  const div = document.createElement('div');
  div.innerHTML = `Average - ${calculateAverage(m)}`;
  m.appendChild(div);
});
         

.course_eval_row {
  border: 1px solid red;
  margin-top: 10px;
}

<div class="course_eval_row cf" style="width:770px;">
    <div class="course_eval_cell hasGrade" smsctip="true">10/10</div>
    <div class="course_eval_cell hasGrade  ">88/100</div>
</div>  
<div class="course_eval_row cf" style="width:770px;">
    <div class="course_eval_cell hasGrade" smsctip="true">4/10</div>
    <div class="course_eval_cell hasGrade  ">34/50</div>
</div>