How to add random number id inside div class

Question

bellow is my html code. this content-box will depend on content. i could be 5, 10, 20 what ever. because it will be dynamic content. now i want to add one more class each div randomly and class name will be color-1, color-2, color-3, color-4, color-5,.............. color-10. so number range will be 1-10. so how could i add those class in content-box random numberly. any idea please.

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-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>

http://jsfiddle.net/dKgaz/

Please post the html markup that you are expecting after _add one more class each div randomly and class name will be color-1, color-2, color-3, color-4, color-5_ — palaѕн, Oct 25 '13 at 07:12
See this previous post: http://stackoverflow.com/questions/4306105/randomize-numbers-with-jquery — twoleggedhorse, Oct 25 '13 at 07:12
Are you sure you want it to be completely random? You'll end up with content-boxes that are stacked on top of each other with the same color. — Kevinvhengst, Oct 25 '13 at 07:15

David Thomas · Answer 1 · 2013-10-25T07:22:24.480

6

$('div.content-box').addClass(function(){
    var color = Math.floor(Math.random() * 10) + 1;
    return 'color-' + (color < 10 ? '0' + color : color)
});

JS Fiddle demo.

Updated the demo, to be a little more obvious: demo.

edited Oct 25 '13 at 07:22

answered Oct 25 '13 at 07:13

David Thomas

249,100
51
377
410

Right on the spot answer, just for clarification for the OP `Math.random();` will return a number between 0 and 1, if you multiply this by `* 10` you will get a decimal number, the `Math.floor();` block will then round the number down to a whole number, e.g. 0 to 10. – SidOfc Oct 25 '13 at 07:16
lol, we came up with the same answer...except I can't see your demo working – twoleggedhorse Oct 25 '13 at 07:17
@two: how's the updated demo? Or does it fail for you in some other way? – David Thomas Oct 25 '13 at 07:22

twoleggedhorse · Accepted Answer · 2013-10-25T07:26:10.967

4

I've updated your JSFiddle. Basically you want the following javascript:

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

Your JSFiddle demo updated

The $('.content-box').each bit selects each element with the content-box class and then loops through the collection applying whatever is in the brackets. In this case Math.random() gives you a number between 0 and 1, which we multiply by 10 and add 1 to get a random number between 1 and 10. The Math.floor bit ensures that there are no decimal places. Finally we take that number and add the class "color-[random number]" to the current element.

Obviously there may be more than one box with the same number so you'll have to create an array to store previous ones if you don't want repetition.

edited Oct 25 '13 at 07:26

answered Oct 25 '13 at 07:16

twoleggedhorse

4,938
4
23
38

wow.. cool.. it's working nicely – Accore LTD Oct 25 '13 at 07:23
@AccoreLTD I've added a little more explanation to help you work out what's going on. – twoleggedhorse Oct 25 '13 at 07:28
i checked you code in my script its nicely work. but each time refresh number got change. it's random that i understand. but just want to know if want number will not change after refresh. then how ? – Accore LTD Oct 25 '13 at 07:29
@AccoreLTD You'd have to work out the number on the server and then store that in a database or use cookies. Javascript will execute on the page each time you refresh. – twoleggedhorse Oct 25 '13 at 07:32
@AccoreLTD Have a look at this thread: http://stackoverflow.com/questions/1981673/persist-javascript-variables-across-pages/1981681#1981681 – twoleggedhorse Oct 25 '13 at 07:34

score 1 · Answer 3 · answered Oct 25 '13 at 07:18

1

Try this:

$('div.content-box').addClass(function(idx){
    return 'color-' + (idx % 10 + 1);
});

answered Oct 25 '13 at 07:18

Bhojendra Rauniyar

83,432
35
168
231

score 0 · Answer 4 · answered Oct 25 '13 at 07:20

What about this:

    function randomInt(min, max) {

        return Math.floor(Math.random() * (max - min + 1)) + min;
    }

    $('.content-box').each(function() {

        $(this).addClass('color-' + randomInt(1, 10));
    });

As all randomly, there could be same classes generated, if you want the class name unique, seach some array shuffle method, shuffle the [1, .. 10] array, and addClass repeatly

How to add random number id inside div class

4 Answers4