Apply random color to class elements individually?

css, javascript, jquery

Solution

$(document).ready(function() {
    $('.main').each(function () {
        var hue = 'rgb(' + (Math.floor((256-199)*Math.random()) + 200) + ',' + (Math.floor((256-199)*Math.random()) + 200) + ',' + (Math.floor((256-199)*Math.random()) + 200) + ')';
        $(this).css("background-color", hue);
    });
});

Problem

My goal is to each div with a class of "main" to have a random background color. I have the script that generates the random color but, using jquery, I only seem to be able to apply it to all divs in the class. How can I select a div, apply the color, select the next div in the class, generate a new random color, apply it and repeat? Here's my code: ``` $(document).ready(function() { var hue = 'rgb(' + (Math.floor((256-199)*Math.random()) + 200) + ',' + (Math.floor((256-199)*Math.random()) + 200) + ',' + (Math.floor((256-199)*Math.random()) + 200) + ')'; $('.main').css("background-color", hue); }); ```

Original source