如何让指定代码仅在父元素为holder1的flow-hold元素上执行？

要让你的jQuery代码仅作用于父元素为holder1的.flow-hold元素，只需要调整选择器并优化代码逻辑即可：

修改后的jQuery代码 #

// 精准选择.holder1内部的所有.flow-hold元素
$('.holder1 .flow-hold').each(function() {
  // 提取文本并转为整数，避免重复解析
  const num = parseInt($(this).text(), 10);
  let bgColor = 'transparent';
  
  if (num >= 50 && num <= 600) {
    bgColor = 'green';
  } else if (num >= 601 && num <= 1000) {
    bgColor = 'yellow';
  } else if (num >= 1001 && num <= 4000) {
    bgColor = 'red';
  }
  
  $(this).css("background-color", bgColor);
});

关键说明 #

• 选择器调整：把原来的.flow-hold换成.holder1 .flow-hold，这是后代选择器，只会匹配所有被.holder1包裹的.flow-hold元素，完全不会干扰.holder2或者直接顶级的.flow-hold元素。
• 代码优化：我把重复执行的parseInt($(this).text())提取成了变量num，同时用一个变量统一管理背景色，让逻辑更清晰易读，也减少了不必要的DOM操作。

对应你的HTML结构效果 #

执行修改后的代码后：

• 只有<div class="holder1">内部的<div class="flow-hold">1000</div>会被设置为黄色背景
• 其他.flow-hold元素（包括顶级的、.holder2里的）都保持默认的透明背景

如果你需要更严格的匹配（比如只针对.holder1的直接子元素），可以把选择器改成.holder1 > .flow-hold，不过你的HTML结构里是直接子元素，两种选择器都能正常工作。

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