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() 正在返回第一个文本。您只需使用 $(origScoreElement, this) 选择当前 div.student-item 的子项 div.orig-score。