Random Div BG change

Change the Value in random to set number of colors

by Harsh Bhatnagar

HTML

<div class="content-box">
    <img src="images/love-01.jpg" />

</div>

<div class="content-box">
    <img src="images/love-05.jpg" />

</div>
<div class="content-box">
    <img src="images/love-05.jpg" />

</div>


<div class="content-box">
    <img src="images/love-02.jpg" />

</div>

<div class="content-box">
    <img src="images/love-03.jpg" />

</div>

<div class="content-box">
    <img src="images/love-04.jpg" />

</div>
<div class="content-box">
    <img src="images/love-05.jpg" />

</div>


<div class="content-box">
    <img src="images/love-02.jpg" />

</div>

<div class="content-box">
    <img src="images/love-03.jpg" />

</div>

<div class="content-box">
    <img src="images/love-04.jpg" />

</div>
<div class="content-box">
    <img src="images/love-05.jpg" />

</div>


<div class="content-box">
    <img src="images/love-02.jpg" />

</div>

<div class="content-box">
    <img src="images/love-03.jpg" />

</div>

<div class="content-box">
    <img src="images/love-04.jpg" />

</div>
<div class="content-box">
    <img src="images/love-05.jpg" />

</div>


<div class="content-box">
    <img src="images/love-02.jpg" />

</div>

<div class="content-box">
    <img src="images/love-03.jpg" />

</div>

<div class="content-box">
    <img src="images/love-04.jpg" />

</div>
<div class="content-box">
    <img src="images/love-05.jpg" />

</div>


<div class="content-box">
    <img src="images/love-02.jpg" />

</div>

<div class="content-box">
    <img src="images/love-03.jpg" />

</div>

<div class="content-box">
    <img src="images/love-04.jpg" />

</div>
<div class="content-box">
    <img src="images/love-05.jpg" />

</div>


<div class="content-box">
    <img src="images/love-02.jpg" />

</div>

<div class="content-box">
    <img src="images/love-03.jpg" />

</div>

<div class="content-box">
    <img src="images/love-04.jpg" />

</div>
<div class="content-box">
    <img src="images/love-05.jpg" />

</div>


<div class="content-box">
    <img...

CSS

.content-box {
    width: 100px;
    height: 100px;
    float: left;
    background-color: #569;
    margin: 5px;
}

.color-1 {
    background-color: red
}

.color-2 {
    background-color: green
}

.color-3 {
    background-color: pink
}

.color-4 {
    background-color: #867
}

.color-5 {
    background-color: #967
}

.color-6 {
    background-color: #257
}

.color-7 {
    background-color: #869
}

.color-8 {
    background-color: #425
}

.color-9 {
    background-color: #358
}

.color-10 {
    background-color: #268
}

JavaScript

$('.content-box').each(function() {
    var number = 1 + Math.floor(Math.random() * 4);
    $(this).addClass("color-" + number.toString());
});