开发者

Use jQuery to find div by background color

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 
  开发者_C百科  $('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?


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.


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()


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

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


you could do this:

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

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜