jQuery .each 循环与简单的数学不给出单独的结果

Question

我正在尝试遍历每个 .student-item div，从每个 .student-item 中的各种数字计算一堆不同的值（数字不需要更改），并输出新文本和/或添加/使用这些值修改 CSS 样式。

问题

1. 虽然.each 似乎在工作——我在循环的每个主要部分之后将消息记录到控制台，我看到每个有 10 个，这是正确的项目数——见 #2下面。
2. 数学不工作（因此.else 循环？）。我还记录了其中一个变量，scoreChangeNum，其中包含一些 简单 数学，只有在满足一个 .hasClass 条件时才会显示（这应该适用于 .student-items 中的 7 个这个案例）。您还将看到 +-8 ytd 文本。此文本在 scoreChangeNum 变量中计算并附加到跨度内。计算错误（每个数字应该在 ~10 到 ~300 之间）并且是为每个 .student-item 编写的（它们应该都是不同的）。
3. 我添加到某些元素的 css 并没有将它们移动到应有的位置。我猜是因为数学似乎不对..？位置（和某些元素的宽度）应由不同元素内的数字确定。

这有意义吗？对不起，跑步。希望得到一些关于这里出了什么问题的提示。让我知道是否有任何不清楚的地方。谢谢！

编辑（在此处添加代码。）：

HTML（但.student-item 共有 10 个）

<div class="students-list">
  <div class="student-item">
    <a href="#" class="name">Jim Wise</a>
    <div class="score-bar">
      <div class="scores">
        <div class="current-score point">180</div>
        <div class="orig-score-arrow"></div>
        <div class="orig-score">80</div>
        <div class="score-change">+<span class="score-change-amount">nnn</span> ytd</div>
      </div>
      <ul id="markings">
        <li>&nbsp;</li>
        <li>&nbsp;</li>
        <li>&nbsp;</li>
        <li>&nbsp;</li>
        <li>&nbsp;</li>
        <li>&nbsp;</li>
        <li>&nbsp;</li>
        <li>&nbsp;</li>
        <li>&nbsp;</li>
        <li>&nbsp;</li>
        <li>&nbsp;</li>
        <li>&nbsp;</li>
        <li>&nbsp;</li>
      </ul>
    </div>
    <div class="print-icon"></div>
  </div>
  <div class="student-item">
    <a href="#" class="name">Frank Owens</a>
    <div class="score-bar">
      <div class="scores">
        <div class="current-score point">280</div>
        <div class="orig-score-arrow"></div>
        <div class="orig-score">100</div>
        <div class="score-change">+<span class="score-change-amount">nnn</span> ytd</div>
      </div>
      <ul id="markings">
        <li>&nbsp;</li>
        <li>&nbsp;</li>
        <li>&nbsp;</li>
        <li>&nbsp;</li>
        <li>&nbsp;</li>
        <li>&nbsp;</li>
        <li>&nbsp;</li>
        <li>&nbsp;</li>
        <li>&nbsp;</li>
        <li>&nbsp;</li>
        <li>&nbsp;</li>
        <li>&nbsp;</li>
        <li>&nbsp;</li>
      </ul>
    </div>
    <div class="print-icon"></div>
  </div>
</div>

jQuery

$(document).ready(function() {

  var studentItem = '.student-item';

  $(studentItem).each(function(){
    console.log('"each" function - CHECK');

    var currentScoreElement = '.current-score',
        origScoreArrow = '.orig-score-arrow',
        origScoreElement = '.orig-score',
        origScoreNum = parseInt($(origScoreElement).text()),
        origScorePos = parseInt(origScoreNum * .48),
        scoreChangeSpan = '.score-change-amount';

    console.log('initial variables - CHECK');

    if ( $(currentScoreElement).hasClass('point') ) {
      var currentScoreNum = parseInt($(currentScoreElement).text()),
      currentScorePointPos = parseInt(currentScoreNum * .48),
      origScoreArrowWidth = parseInt((currentScorePointPos - origScorePos) * .9),
      scoreChangeNum = parseInt(currentScoreNum - origScoreNum);

      console.log(scoreChangeNum);

      $(currentScoreElement).css({ 'left': currentScorePointPos + 'px' });
      $(origScoreElement).css({ 'left': origScorePos + 'px' });
      $(origScoreArrow).css({ 'left': origScorePos + 'px', 'width': origScoreArrowWidth + 'px' });
      $(scoreChangeSpan).text(scoreChangeNum);
      $(scoreChangeSpan).css({ 'left': parseInt(currentScorePointPos - 12) + 'px'     });

    } else if ( $(currentScoreElement).hasClass('range') ) {
      var currentRangeStart = parseInt($(currentScoreElement).find('.start').text()),
      currentRangeEnd = parseInt($(currentScoreElement).find('.end').text()),
      currentRangeWidth = parseInt(currentRangeEnd - currentRangeStart),
      currentRangeAvg = parseInt((currentRangeStart + currentRangeEnd) / 2);
      origScoreArrowWidth = parseInt(currentRangeAvg - origScorePos),
      scoreChangeNum = parseInt(currentScoreNum - origScoreNum);

      $(currentScoreElement).css({ 'left': currentRangeStart + 'px', 'width': currentRangeWidth + 'px' });
      $(origScoreElement).css({ 'left': origScorePos + 'px' });
      $(origScoreArrow).css({ 'left': origScorePos + 'px', 'width': origScoreArrowWidth + 'px' });
      $(scoreChangeSpan).text(scoreChangeNum);
      $(scoreChangeSpan).css({ 'left': parseInt(currentRangeAvg - 12) + 'px' });
    }

  });

});

Answer 1

问题是$(origScoreElement) 正在选择页面上的所有 div.orig-score 元素，而 .text() 正在返回第一个的文本。您只需要选择作为当前 div.student-item 子项的 div.orig-score，使用 $(origScoreElement, this)。