基于div值修改CSS Grid单元格背景失效，求助排查jQuery代码问题

我现在需要根据从PHP数据库查询到的div值，修改CSS Grid中单元格（类名为.a）的背景色。之前用jQuery给另一个div实现过类似功能，但这次比较的值来自目标单元格的子div（类名为.datetime）。

我的HTML结构如下：

<div class='box a'> 
  <div class='box name'><a style='text-decoration:none; color:#444;' href='foobar.com' target='_blank'>Proper Name</a></div> 
  <div class='box mm'>75.49</div> 
  <div class='sog'>10.2</div> 
  <div class='box datetime'>1</div> 
</div>

我写的jQuery函数是这样的：

$('.datetime').each(function(index, value) { 
  var value = Number($(this).text()); 
  console.log(value); 
  if (value < 4) $('.a').css('background-color', '#fff'); 
  else if (value >= 4 && value <= 15) $('.a').css('background-color', 'orange'); 
  else $('.a').css('background-color', 'purple'); 
});

补充说明：

• .datetime里的内容是表示两个时间间隔的分钟数（整数）
• .a是我要修改背景色的CSS Grid单元格

现在遇到的问题是：所有.a元素的背景色都变成了#fff，条件判断没有正确执行，请问我哪里写错了？

你出错的核心原因很简单：在循环里每次修改背景色时，你选中了所有的.a元素，而不是当前正在处理的.datetime对应的那个父元素.a。

举个例子，假设你有多个.a单元格，第一个.datetime的值是1（符合<4的条件），这时候所有.a都被设为白色；第二个.datetime的值是5（符合4-15的条件），所有.a又被改成橙色；如果最后一个.datetime的值是1，那最后所有.a都会被改回白色——这就是为什么你看到所有单元格都是白色的原因。

修正后的代码应该这样写：

$('.datetime').each(function(index, element) { 
  var value = Number($(this).text()); 
  console.log(value); 
  // 找到当前.datetime对应的父级.a元素
  var parentBox = $(this).closest('.a');
  if (value < 4) {
    parentBox.css('background-color', '#fff'); 
  } else if (value >= 4 && value <= 15) {
    parentBox.css('background-color', 'orange'); 
  } else {
    parentBox.css('background-color', 'purple'); 
  }
});

关键修改点： #

• 使用$(this).closest('.a')来定位当前.datetime所在的那个.a单元格，而不是全局选中所有.a
• 把修改样式的对象从全局的.a换成了当前对应的parentBox，这样每个单元格的样式只会根据自己的.datetime值来设置

另外还有个小细节：原代码里的each函数第二个参数你命名为value，但后面又重新定义了var value = Number(...)，虽然不会报错，但有点混淆，我改成了element，你也可以换成其他清晰的名字。

这样修改后，每个.a单元格的背景色就会根据自己子元素.datetime的数值正确变化啦。

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