1

I am creating a script that'll iterate each element under 'body' and will check for its 'background-color'. If this background color matches to '#eb2c33', then the script will add a class to that element or else it'll move to the next element. I am using this so to avoid going into the html and put that class to elements manually. Here is my code.

$(document).ready(function (e) {
        
  $('body *').each(function(index) {
    
         var rgbg = $(this).css('background-color');
         if(rgbg == "#eb2c33")
         {
                $(this).addClass('jcbg');
             
              }

      });
});

Now, this function works perfectly if i iterative over a specific div like header or footer etc. But when i iterate over the whole DOM, this function is not working at all. Please note that i am using a csshook that'll give me color values in Hex rather than rgb so please don't go for that. Any help?

Update:

I know the problem now. It was in that css hook from this post that i was using. i just removed that hook and directly have used rgb value and it started working perfectly. Here is my updated code

$(document).ready(function (e) {
        

     $('body *').each(function(index) {
    
         var rgbg = $(this).css('background-color');
         if(rgbg == "rgb(235, 44, 51)")
         {
                $(this).addClass('jcbg');
             
             }

    });

});

Thanks @Guffa for your fiddle. It helped me.

Community
  • 1
  • 1
Awais Umar
  • 2,027
  • 3
  • 27
  • 46
  • What do you mean exactly when you say that it's not working? What is the result, and how does that differ from what you expect? – Guffa Jun 17 '14 at 11:31
  • This is a really horrible way to do this. You should set up a class with a background color of #eb2c33 and then use jQuery to search for that class instead. – Andy Jun 17 '14 at 11:32
  • @Guffa I mean it does not work at all. It was supposed to add that class like it does when i target specific elements. It just does not add the class. Nothing happens if i iterate over body * – Awais Umar Jun 17 '14 at 11:36
  • 2
    @Symbolwdd: It works fine when I test it: http://jsfiddle.net/k33pL/ – Guffa Jun 17 '14 at 11:42
  • @Guffa Its strange...Something must be conflicting then...Thank you for pointing out that... – Awais Umar Jun 17 '14 at 11:44
  • If you are setting the `background-color` property from stylesheet, you have to know that it returns `RGB` if you already set a color by name or HEX -or- `RGBA` if you set nothing already or you use rgba directly – kosmos Jun 17 '14 at 11:46

1 Answers1

0

The problem is that jquery returns rgb(...) even if you declare as HEX so i just added a function to translate hex to rgb:

function hex2rgb(hex) {
  return ['0x' + hex[1] + hex[2] | 0, '0x' + hex[3] + hex[4] | 0, '0x' + hex[5] + hex[6] | 0];
}

and than just adapted your code:

$(document).ready(function (e) {

    // Color to change
    var targetHex = hex2rgb('#eb2c33');

    $('body *').each(function(index) {         
        var rgbg = $(this).css('background-color');

        if(rgbg == 'rgb('+targetHex[0]+', '+targetHex[1]+', '+targetHex[2]+')'){
            $(this).addClass('jcbg');
        }

    });
});

Here is the Fiddle

BrendanMullins
  • 587
  • 3
  • 18