基于背景颜色对所有元素使用 jQuery 过滤器答案

【问题标题】：Using jQuery filter on all elements based on background-color基于背景颜色对所有元素使用 jQuery 过滤器
【发布时间】：2017-11-28 17:52:16
【问题描述】：

我目前正在使用生成的 html 代码。

我正在尝试选择所有元素，然后过滤那些具有相同背景颜色的元素并进行更改。我当前的代码不起作用：

$('*').filter(function(){
   return $(this).css('background-color') === '#0689cb';
}).css('background-color', 'green');

它返回了很多元素，但并没有改变任何东西。

如果我尝试这样的 .length：

$('*').filter(function(){
   return $(this).css('background-color') === '#0689cb';
}).length;

将返回 0，这意味着它没有得到任何东西。

我的过滤功能有什么问题？

哦，我用 $('div') 尝试了选择器，看看选择器是否有问题，但它没有改变任何东西。

感谢您的帮助。

【问题讨论】：

我很确定背景颜色不会返回十六进制格式，而是 rgb ...我之前看到过这样的问题，但找不到它:)
哦，我也尝试了 rgb，它不起作用@TemaniAfif
是的，但是你需要注意一些空格，因为它是作为字符串返回的......你可以做一个console.log，你会看到如何
提供@TemaniAfif 观点的示例：jsfiddle.net/x9zcaqjr - background-color: red; 输出rgb(255, 0, 0)、间距和所有内容。
simple console.log($(this).css('background-color')) 会显示失败的原因

标签： javascript jquery css filter

【解决方案1】：

您需要使用 RGB 值，并且需要在值之间用逗号和空格写入值。

下面是一个函数（改编自 here），它将有效的十六进制代码转换为正确的 RGB 字符串。

$('*').filter(function(){
  return $(this).css('background-color') === hexToRgb('#0689cb');
}).css('background-color', 'green');

function hexToRgb(hex) {
    var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
    
    // Correct string should be like: "rgb(6, 137, 203)" <-- note the spaces
    return "rgb(" + 
        parseInt(result[1], 16) + ", " + 
        parseInt(result[2], 16) + ", " +
        parseInt(result[3], 16) + ")";
}

.colorToFind {
  background-color:#0689cb;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="colorToFind">hello</div>
<div>hello</div>
<div class="colorToFind">hello</div>
<div>hello</div>

【讨论】：

哦，我不知道空格，我想那是我的错误。感谢您的帮助，我会根据我的情况对其进行调整。我将把它作为 sn-p 的公认问题，即使所有其他答案都提供了我的错误。谢谢大家！ @charlietfl
过去也看到一些浏览器返回rgba。 Chrome 做了一段时间，但似乎已经恢复到 rgb

【解决方案2】：

background-color 将返回 rgb。您需要找到十六进制代码的 RGB 值并在条件中使用它。

$('*').filter(function() {
   return $(this).css('background-color') === 'rgb(6, 137, 203)';
}).css('background-color', 'green');

如果您决定手动转换十六进制值，请参考此 post：

【讨论】：

对不起。是一个错字。现已修复。

【解决方案3】：

将十六进制颜色与计算样式返回的颜色（不是十六进制）相匹配的简单方法是创建一个元素...使用十六进制将该颜色应用于它，然后查看浏览器作为计算颜色返回的颜色

function getComputedColorVal(hex) {
  return $('<span>').css('color', hex).css('color');
}

let hex = '#0689cb',
  computedColor = getComputedColorVal(hex)

$('*').filter(function() {
  return $(this).css('background-color') === computedColor;
}).css('background-color', 'green');

.blue{background-color:#0689cb}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<ul>
  <li class="blue">Item</li>
  <li>Item</li>
  <li class="blue">Item</li>
  <li>Item</li>
  <li class="blue">Item</li>
</ul>

【讨论】：