Question

I have the following jQuery code that works fine in Firefox and Internet Explorer. It doesn’t work in Chrome and I can’t figure out why.

I’m trying to change the background-image of an element with this code:

$(".category-nav").find("a").each(function(index){
    if($(this).css("background-color") === "transparent" && !$(this).parent().hasClass("level1"))
    {
        $(this).css("background-image", "url(/images/gallery/images/arrow-cat-list-grey.png)");
    }
}); 

Answer 1

Chrome returns the background color as rgba(0, 0, 0, 0) for transparent (demo)

Try this code instead (demo):

$(".category-nav").find("a").each(function(index){
    if ( /transparent|rgba\(0, 0, 0, 0\)/.test($(this).css("background-color") ) &&
          !$(this).parent().hasClass("level1") )
    {
        $(this).css("background-image", "url(/images/gallery/images/arrow-cat-list-grey.png)");
    }

});