Select only green divs

Hello

I expecte to see: There are 1 green divs

But I see: There are 0 green divs

Code: http://jsfiddle.net/8Observer8/eym6L/

Thank you for advance!

The problem is this line:

return $( element ).css( "background-color" ) === "green";

If you log the elements background colour to the console, you will see:

console.log($( element ).css( "background-color" ));

rgb(0, 128, 0) (index):24
rgb(0, 0, 0) (index):24
rgb(0, 0, 255) 

Try using element.style.backgroundColor instead.

fiddle

Thank you very much :slight_smile:

I had a play with plain JS, but couldn’t get a result. (I’ll never get the hang of this. :rolleyes: ). What’s wrong with this?

var divs = document.querySelectorAll('div');

var num = 0;
for (var i=0; i<divs.length; i=i+1) {

    if (divs[i].backgroundColor === "green") {
        num = num + 1;
    }

}

console.log( "There are " + num + " green divs" );

Hey Ralph,

You have to query the element’s style property, not the element itself.

This:

if (divs[i].backgroundColor === "green") {

Should be:

if (divs[i].[B]style[/B].backgroundColor === "green") {

O man. :nono: I was trying to work out what arcane JS syntax I was misunderstanding, while all the while it was a typo (effectively, as that’s what I meant to write). Thanks Pullo. :smiley:

No problems :slight_smile:

You could also do it like this:

var num = Array.prototype.filter.call(document.querySelectorAll('div'), function(el){
    return el.style.backgroundColor === "green"
}).length;

console.log("There are " + num + " green divs");

Thanks Pullo. Did a bit of reading on Array.prototype.filter. Interesting … though I doubt I’d know when to use it in future.