对所有基于background-color的元素使用jQuery过滤器

Question

I'm currently using a generated html code.

I'm trying to select all elements and then filter those who got the same background-color and change it. My current code, which is not working:

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

It returns a lot of elements, but it doesn't change anything.

If I try the .length like this:

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

Will return 0, which means, it is not getting anything.

What am I doing wrong with my filter function?

Oh, and I tried the selector with $('div') to see if it was something wrong with the selector, but it didn't change anything.

Thanks for the help.

Answer 1

background-color will return rgb . You'll need to find the RGB value of your the hex code and use that in your conditional.

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

Reference this post if you decide to manually convert the hex value:

Answer 2

You need to use an RGB value and you need to write the values with commas and spaces between them.

Below is a function (adapted from here ) that will convert valid hex codes to the correct RGB string.

 $('*').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

Simple way to match your hex color to color that computed style returns (which will not be hex) is to create an element...apply that color to it using hex, then see what browser returns as computed color

 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>