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

Question

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

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

я в настоящее время видимая ДИВА часть работает как:

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

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

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

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

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

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

Answer 3

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

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

Answer 4

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

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