Use jQuery to find div by background color

Question

I'm trying to use jQuery to find the number of divs that are both visible, and have a background color of Green.

(Normally I'd just add a class to the div, style it green, and check for that class in jQuery but in this instance, I can't actually change the markup of the page itself in any way)

I currently have the visible div part working as :

if(  // if there are more than one visible div 
    $('div.progressContainer:visible').length > 0   
){

I'd like to throw some kind of "and background color is green" selector in there.

// not legit javascript
if(  // if there are more than one visible div, and its color is green 
    $('div.progressContainer:visible[background-color:green]').length > 0   
){

Is it possible to do this?

Answer 1

jQuery does not have style-based selectors (other than :visible), so you can't do that.

You can use filter instead:

$('div.progressContainer:visible').filter(function() {
    return $(this).css('background-color') === 'green';
})

Note that it won't match background-color:#0F0.

Answer 2

you could do this:

if($('div.progressContainer:visible').css('background-color') == 'green'){
   //should equal true, if it's green
}

Answer 3

You can use filter to fine tune what you're selecting like this:

$('div.progressContainer:visible').filter(function(){
   return $(this).css('background-color') == 'green';
});

Answer 4

If you use this in more than one location frequently you could also consider writing your own custom selector (http://answers.oreilly.com/topic/1055-creating-a-custom-filter-selector-with-jquery/)

jQuery.expr[':'].greenbg = function(elem) {
        return jQuery(elem).css('background-color') === 'green';
};

Then you would simply do $('div:visible:greenbg').stuffs()

Answer 5

Hi,

$.expr[":"].green = function(a) { 
    return /^green$/.test($(a).css('backgroundColor')); 
}; 

should do it.

Kind Regards

--Andy