jQuery Not Setting CSS property

Question

var shadeAmount = 161 / $('.header').length;
        $('.header').each(function (i, e) {
            var shade = i * shadeAmount;
            var color = 'rgb(' + shade + ',' + shade + ',' + shade + ')';
            $(this).css({"background-color": color});
        });

I cannot get the above code to set the background-color property of each header. If I change the code to this:

$(this).css({"background-color": "rgb(1,1,1)"});

It works. So what's wrong with the way I'm declaring color?

Why is there odd number of " in $(this).css({"background-color": "rgb(1,1,1)});? — CAPS LOCK
– CAPS LOCK, Commented Nov 12, 2013 at 17:03

iambriansreed · Accepted Answer · 2013-11-12 17:20:35Z

3

Try this...

var count = $(".header").length;
if (count) {
    var shadeAmount = parseInt(161 / count, 10);
    $('.header').each(function (i, e) {
        var shade = i * shadeAmount;
        var color = 'rgb(' + shade + ',' + shade + ',' + shade + ')';
        $(this).css({"background-color": color});
    });
}

I've just sanitised it by wrapping the calculation of shadeAmount in parseInt, to ensure you're not passing floats into the rgb value.

I also added a check that there are elements with the header class, as your code would fail if you ran it on a page where there were none.

edited Nov 12, 2013 at 17:20

iambriansreed

22.3k6 gold badges66 silver badges81 bronze badges

answered Nov 12, 2013 at 17:08

Reinstate Monica Cellio

26.2k6 gold badges54 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user1017882 Over a year ago

Ahh,I think you've cracked it! I am parsing floats into the RGB, as it's a division. Thank you very much. I'll try this now.

Reinstate Monica Cellio Over a year ago

Thanks @iambriansreed - I just spotted it as you were changing it :)

Francis · Accepted Answer · 2013-11-12 17:15:48Z

0

var shadeAmount = 161 / $('.header').length;
$('.header').each(function (i, e) {

    var shade = ++i * shadeAmount;

    var color = 'rgb(' + shade + ',' + shade + ',' + shade + ')';

    console.log(color);

    $(this).css({
        "background-color": color
    });
});

fiddle: http://jsfiddle.net/2mUH2/

edited Nov 12, 2013 at 17:15

answered Nov 12, 2013 at 17:05

Francis

1,24412 silver badges19 bronze badges

Collectives™ on Stack Overflow

jQuery Not Setting CSS property

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related