Используйте jQuery, чтобы найти div по цвету фона

Question

Я пытаюсь использовать jQuery, чтобы найти количество div, которые оба видимы, и имеют фоновый цвет Зеленый.

(Обычно я просто добавляю класс в div, окрашиваю его в зеленый цвет и проверяю этот класс в jQuery, но в этом случае я никак не могу изменить разметку самой страницы)

У меня есть видимая часть div, работающая как:

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

Я бы хотел добавить сюда какой-нибудь селектор "и цвет фона - зеленый".

// 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   
){

Возможно ли это сделать?

Answer 1

jQuery не имеет селекторов на основе стилей (кроме :visible), поэтому вы не можете сделать это.

Вы можете использовать filter вместо:

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

Обратите внимание, что оно не будет совпадать background-color:#0F0.

Answer 2

Если вы используете это более чем в одном месте часто, вы можете также написать свой собственный селектор (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';
};

Тогда вы просто сделаете $('div:visible:greenbg').stuffs()

Answer 3

Вы можете использовать фильтр , чтобы точно настроить то, что вы выбираете, как это:

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

Answer 4

Вы могли бы сделать это:

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