Javascript assigned CSS background-image issue

Question

I wrote this code that gives for each class.hpCarousel the relating background image.

The image names being: 0bg.jpg, 1jpg.bg, 2bg.jpg, etc...

for (i=0; i < 8; i++) {
$('.hpCarousel:eq('+i+')').css('background-image', 'url(wp-content/themes/blankslate/assets/carousel/'+i+'bg.jpg');
}

It works fine in Firefox. The classes have a style with their correct background-image assigned.

It does not work in Chrome OSX&WIN /Safari OSX/ IE. The.hpCarousel class divs have no style.

I thought at first it was something to do with Chrome's background refresh bug. But finding it on other browsers has made me think otherwise.

Am I clearly doing something wrong?

These classes are hidden on load. Does that make any difference? Then they fade in and out after one another to produce a carousel

Answer 1

Do you have errors in FireBug? You could use another (more general) selector in the loop:

$('.hpCarousel:nth-child(' + i + ')')

Also the $.each iterator is a more convenient way to iterate through your backgrounds.

$('.hpCarousel').each(function(index) {
    $(this).css('background-image', 'url(wp-content/themes/blankslate/assets/carousel/'+index+'bg.jpg');
});