[jQuery] Selection by CSS background-color
I've got an app based upon SIMILE Timeline (http://simile.mit.edu/
timeline/) which displays our various projects. SIMILE allows you to
specify various colors for different events (e.g. projects that are on-
time, projects that are behind schedule, etc.). Unfortunately SIMILE
*does not* provide a way to specify "id" or "class" attributes for the
<div> elements that SIMILE generates for the events.
So now I'm trying to provide a UI so that the user can remove certain
events from the Timeline (thinning the herd). The only attribute that
has a discernable value is the "style" attribute which has "background-
color" CSS attribute and a of course a specified color. But I'm
having trouble with the JQuery selector. I know I've got some
alternatives like looping through all of the <div> elements of the
parent element reading comparing .css('background-color') with the
target color, but I'd really like the selector to work correctly.
I've been using JQuery for a year now and this is the first time I had
a problem.
A couple of things I've tried:
$("div[style*=background-color:firebrick]");
$("div[style*=backgroundColor:firebrick]");
$("div[style*= firebrick]");
Here's a small simplified example. What am I doing wrong?
<html>
<head>
<script type="text/javascript" src="http://klong-61174/sfb/Scripts/
Client/jquery-latest.pack.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
// this "loop" displays the complete value of the style attribute
$("div:[style]").each(function() {
alert($(this).attr('style'));
});
var x = $("[style=background-color:firebrick]");
alert(x.length); // should display "2", but it displays "0"
});
</script>
</head>
<body>
<div style="background-color:red;"> </div>
<div style="background-color:firebrick;"> </div>
<div style="background-color:green;"> </div>
<div style="background-color:darkolivegreen;"> </div>
<div style="background-color:firebrick;"> </div>
</body>
</html>
Thanks in advance for any help you can provide!