Randomly changing colors of specified elements within one div or post

Question

I have in mind a design idea where certain elements of a post will have the same random color values.

Example:

<post>
<top border-top = random color>
<h1 color = same random color>
text body copy (not random color)
<div background = same random color>
more elements (not random color)
<bottom border-bottom = same random color>
<end post>

I have tried this on my own and got something like this, but couldn't figure out how to select the multiple elements.

http://jsfiddle.net/r74j6/200/

function get_random_color() {
    var letters = '0123456789ABCDEF'.split('');
    var color = '#';
    for (var i = 0; i < 6; i++) {
        color += letters[Math.round(Math.random() * 15)];
    }
    return color;
}


$(".post").each(function() {
    $(this).css('background-color', get_random_color());
});

Answer 1

You need to change your code a bit to look like this:

$(".post").each(function() {
    var color = get_random_color();
    $(this).children("h1, div").css('background-color', color);
});

Notice you can change the children selector at will.

Here's a working example: http://jsfiddle.net/r74j6/212/

Answer 2

In order to recolor all elements fitting the selector you provide to JQuery, remove the .each() call from your code.

In your example, replace:

$(".post").each(function() {
    $(this).css('background-color', get_random_color());
});

with

$(".post").css('background-color', get_random_color());

Then all elements with the class ".post" will be colored to the same random color all at once.