對所有基於background-color的元素使用jQuery過濾器

Question

我目前正在使用生成的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'）選擇器，看選擇器是否有問題，但沒有改變。

謝謝您的幫助。

Answer 1

background-color將返回rgb 。 您需要找到十六進制代碼的RGB值並將其用於條件代碼中。

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

如果您決定手動轉換十六進制值，請參考此文章 ：

Answer 2

您需要使用RGB值，並且需要使用逗號和空格寫入值。

下面是一個函數（從此處改編），它將有效的十六進制代碼轉換為正確的RGB字符串。

 $('*').filter(function(){ return $(this).css('background-color') === hexToRgb('#0689cb'); }).css('background-color', 'green'); function hexToRgb(hex) { var result = /^#?([af\\d]{2})([af\\d]{2})([af\\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> 

Answer 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>