I would like to select every div that has a red background color for example. is this possible in jquery?
<div style="background-color:red"></div>
<div style="background-color:white"></div>
<div style="background-color:red"></div>
<div style="background-color:yellow"></div>
thank you
This code also works for CSS that is not defined in the style attribute of the tag:
$('div').filter(function() {
return $(this).css('background-color') == 'red';
});
You could use the jQuery filter:
$('div').filter(function() {
return this.element.style['background-color'] == 'red';
});
But, as tvanfosson has said, the correct way would be to assign a CSS class to each of your divs, then you could call the objects using jQuery like this (which is the preferred way of working with jQuery):
$('.yourCSSClass');
$('div[style=background-color:red]');
background-color:red this will not match
#AABBCC, probably because of the #. How can we escape the # ?:) should also be escaped: jQuery('div[style=color\\:\\#AABBCC]Why do it the hard way? A better solution is to use CSS classes to give your elements their styles, then you can simply use the class-based selector.
<style type="text/css">
.alert {
background-color: red;
}
</style>
<div class="alert"></div>
$('.alert')....
First of all, I never recommend setting in-line styles on page elements. Assign CSS classes and control your background colors in an external CSS document.
<div class="red"></div>
<div class="white"></div>
<div class="red"></div>
<div class="yellow"></div>
And in your CSS:
.red {background-color:red;}
.white {background-color:white;}
.yellow {background-color:yellow;}
Then it makes it easy to select the red ones by using: $('div.red')
I think you need a custom filter for that if you don't want to rely on a certain style=xxx attribute on the tag:
$('*').filter(function() { /* check the background color of this */ });
