jQuery层级问题：仅当span有内容时为其兄弟select添加CSS

需求：仅当class为rules-error的span元素包含内容时，为其同级的select元素添加CSS样式。HTML结构中select与span同处于class为ruleField的td容器内。现有代码可选中所有符合条件的元素，但尝试用$(this)定位当前span对应的特定select时失效，以下是问题分析和正确实现方案。

示例HTML结构 #

<td class="ruleField">
   <select name="rules[field][]" class="form-select ">
      <option value="0">-- Select --</option>
      <option value="554">Identifier</option>
      <option value="548">Display Name</option>
   </select>
   <span class="rules-error">Not allowed.</span>
</td>

现有可行代码（批量操作） #

if( $('.rules-error').text().length>0){
   $('.rules-error').siblings().css('background-color','green')
}

这段代码会给所有rules-error的兄弟元素加样式，无法精准定位单个对应select。

无效代码（$(this)失效） #

if( $('.rules-error').text().length>0){
    $(this).siblings().css('background-color','green')
}

这里$(this)无效的原因是：在当前if判断的上下文里，$('.rules-error').text()是批量获取所有该类元素的文本，此时this指向的是全局对象（比如window），而非单个rules-error元素，自然找不到对应的兄弟select。

正确实现方案 #

方案1：遍历单个元素处理 #

用each遍历每个rules-error元素，此时函数内部的this会指向当前遍历的span，精准定位对应select：

$('.rules-error').each(function() {
  // 判断当前span是否有有效内容（排除纯空格）
  if ($(this).text().trim().length > 0) {
    // 给当前span的兄弟select加样式
    $(this).siblings('select').css('background-color', 'green');
  }
});

方案2：先筛选再操作 #

用filter先筛选出有有效内容的rules-error，再统一为它们的兄弟select加样式：

$('.rules-error')
  .filter(function() {
    return $(this).text().trim().length > 0;
  })
  .siblings('select')
  .css('background-color', 'green');

两种方案都能实现仅为有内容的rules-error对应的特定select添加样式，不会影响其他无关元素。

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