jQuery实现同class div内第二个span数值匹配修改背景色时全部显示绿色

问题场景 #

需要为统一带有.value ok类的div元素，根据其内部第二个span存储的数值（示例值为75、40、54）匹配对应背景色做高亮，现有实现存在缺陷：所有div会被统一设置为绿色，无法根据单个div的数值做差异化渲染。

现有HTML结构 #

<div class="containerbox">
    <div id="centerbox1" style= "min-width:25%; max-height: 90px">
      <p><div class="value ok" data-color="25">
        <span style="color: #fff ;font-weight:bold; font-size:36px">kk</span>
      <span style="color: #fff ;font-weight:bold; font-size:36px">75</span>
      <br>
      </div></p>
  </div>
    <div id="centerbox1" style= "min-width:25%; max-height: 90px">
     <p> <div class="value ok" data-color="100">
        <span  style="color: #fff ;font-weight:bold; font-size:36px">rr</span>
      <span  style="color: #fff ;font-weight:bold; font-size:36px">40</span>
      <br>
      </div></p>
  </div>
    <div id="centerbox1" style= "min-width:25%; max-height: 90px">
      <p><div class="value ok" data-color="25">
        <span  style="color: #fff ;font-weight:bold; font-size:36px">ee</span>
      <span  style="color: #fff ;font-weight:bold; font-size:36px">54</span>
      <br>
      </div></p>
        </div>
</div>

已尝试的错误实现及问题 #

第一版nth选择器实现 #

$('.value.ok').each(function() {
  var val = parseInt( $('.value span:nth-child(even)').text()),
  dd = parseInt( $('.value span:nth-child(2)').text());
  var d = 50;
  var e = 65;
  if (val < d) {
    $(this).css('background-color', 'red');
  }
  if (val > d && val < e) {
    $(this).css('background-color', 'yellow');
  }
  if (val > e && val <= dd) {
    $(this).css('background-color', 'green');
  }
});

核心缺陷：循环内没有给元素选择器绑定当前循环的上下文，直接全局选取页面上所有匹配的span元素，text()方法会把所有匹配span的文本拼接为一个长字符串，最终parseInt解析得到的是拼接后的大数值，远大于阈值65，所有div都会命中绿色的判断逻辑。当移除单个div内的一个span时，匹配的span数量减半，碰巧能拿到单个数值，功能就会临时正常。

第二版非nth选择器实现 #

$('.value.ok').each(function() {
var val = parseInt( $(this).text()),
    dd = parseInt( $('.value.ok').text());
    var d = 50;
    var e = 65;
if (val < d) {
    $(this).css('background-color', 'red');
}
if (val > d && val < e) {
    $(this).css('background-color', 'yellow');
}
if (val > e && val <= dd) {
    $(this).css('background-color', 'green');
}
});

核心缺陷：直接读取当前div的全量文本做数值解析，会把第一个span内的字母内容混入文本流，parseInt解析结果会出现异常；同时全局选取的参考值没有和当前div绑定，最终所有div还是会统一命中同一个背景色的判断逻辑。

修正方案 #

核心调整方向：

• 在each循环内，所有元素选择必须绑定当前$(this)的上下文，禁止全局直接选取类名匹配的元素
• 精准定位每个.value.ok内部的第二个span，单独读取该元素的文本值做数值解析
• 移除无意义的全局参考值判断，直接按数值阈值匹配对应背景色

修正后可正常运行的代码：

$('.value.ok').each(function() {
  // 绑定当前循环的div上下文，定位内部第二个span读取数值
  const $currentBox = $(this);
  const targetVal = parseInt($currentBox.find('span').eq(1).text().trim(), 10);
  const lowThreshold = 50;
  const midThreshold = 65;

  // 根据数值匹配对应背景色
  if (targetVal < lowThreshold) {
    $currentBox.css('background-color', 'red');
  } else if (targetVal > lowThreshold && targetVal < midThreshold) {
    $currentBox.css('background-color', 'yellow');
  } else {
    $currentBox.css('background-color', 'green');
  }
});

补充说明：原逻辑里的val <= dd判断没有实际意义，因为dd本身是通过全局选择器拿到的拼接文本值，和单个div的实际数值没有关联，可以直接移除该判断分支，按数值区间匹配背景色即可。

内容的提问来源于stack exchange，提问作者SandeepTete