CODEWITHSUNDEEP
jquery
salmane
salmane

Reputation: 4849

jquery element filter by css

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

Upvotes: 20

Views: 22302

Answers (6)

ThiefMaster
ThiefMaster

Reputation: 318488

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

Upvotes: 2

Mathieu Rodic
Mathieu Rodic

Reputation: 6762

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

Upvotes: 24

djdd87
djdd87

Reputation: 68456

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

Upvotes: 21

EAMann
EAMann

Reputation: 4146

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

Upvotes: 3

tvanfosson
tvanfosson

Reputation: 532435

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

Upvotes: 7

Gabe
Gabe

Reputation: 50493

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

Upvotes: 18

Related Questions