jQuery如何仅为背景色为rgb(32,44,62)的元素添加goldBorder类？

核心问题定位 #

• 原代码的逻辑错误点有两个：
  • 对元素集合调用css('background-color')获取样式时，jQuery只会返回集合中第一个匹配元素的背景色，不会读取集合内所有元素的各自样式。
  • 后续each遍历所有匹配元素时，判断条件使用的是提前缓存的第一个元素的背景色，没有读取当前遍历到的元素自身的实际背景值。最终只要第一个匹配元素的背景色等于目标值，所有同选择器的元素不管自身真实背景色是什么，都会被添加上goldBorder类。

可直接用的优化代码 #

将背景色的读取操作放到遍历循环内部，针对每个独立元素单独校验：

$('section.content_basic').each(function() {
  // 每次循环读取当前元素自身的背景色
  const currentBg = $(this).css('background-color');
  if (currentBg === 'rgb(32, 44, 62)') {
    $(this).addClass('goldBorder');
  }
});

注意事项：如果页面存在动态修改元素背景色、动态新增section.content_basic节点的场景，需要在样式变更、节点渲染完成的时机重新执行上述校验逻辑，否则会出现类名添加遗漏的问题。

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