jquery element filter by css

Question

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

Answer 1

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')....

Answer 2

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');

Answer 3

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 */ });

Answer 4

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

Answer 5

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';
});

Answer 6

$('div[style=background-color:red]');