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
}
精彩评论