Select random item out of known number of items

Question

I have 8 divs to select from, they all have id's assigned to them, named not numerically, but descriptively. I want to be able to add .myClass to a div chosen at random out of these eight.

To generate a random number, I would use this JavaScript snippet:

var random = Math.round(Math.random()*10);

My questions:

How can I limit the random number to only 1 out of 8 possible values?
How can I add .myClass to a randomly chosen one div out of eight with a non-numeric id?

Your question is really two well-answered but unrelated questions combined into one. You should try to ask one question to post. — user229044, May 22 '13 at 13:22
Not really, @meagar. The essence of the question is somewhat different. — , May 22 '13 at 13:22
This has been asked earlier: http://stackoverflow.com/questions/1527803/generating-random-numbers-in-javascript-in-a-specific-range Including a nice explanation — Reko, May 22 '13 at 13:27

score 2 · Answer 1 · answered May 22 '13 at 13:22

2

var randomNumber= 1 + Math.floor(Math.random() * 8);

answered May 22 '13 at 13:22

vborutenko

4,323
5
28
48

score 2 · Answer 2 · answered May 22 '13 at 13:24

2

How can I limit the random number to only 1 out of 8 possible values?

Store the 8 possible values in an array, A
Get a number between 0 and 7 (inclusive) using Math.random() and assign to X
The random number you want is A[X]

For ex:

var A = [2, 5, 6, 7, 8, 9, 11, 15];
var X = Math.floor(Math.random()*8);

var theNumber = A[X];

answered May 22 '13 at 13:24

techfoobar

65,616
14
114
135

+1: I'm pretty sure this is what the OP actually meant. – Dan Tao May 22 '13 at 13:25

PSR · Answer 3 · 2013-05-22T13:27:49.703

1

var  array= [2, 5, 6, 7, 8, 9, 11, 15];

var X = Math.floor(Math.random()*8);

Then use the following

varray[X];

edited May 22 '13 at 13:27

answered May 22 '13 at 13:22

PSR

39,804
41
111
151

tymeJV · Accepted Answer · 2013-05-22T13:34:54.367

1

How about:

var random = Math.floor(Math.random()*8);
$("div:eq(" + random + ")").addClass("yourClassHere");

Edit: Was answering the question before it was edited, when selecting a random div was also needed.

Fiddle (thanks to smerney): http://jsfiddle.net/5JPWu/2/

edited May 22 '13 at 13:34

answered May 22 '13 at 13:24

tymeJV

103,943
14
161
157

1

you just beat me to it, `+1` This was my example, http://jsfiddle.net/5JPWu/ – Smern May 22 '13 at 13:24
1

Just noticed one problem, you'll want to use `floor` rather than `round`... as the `eq` index starts at 0 and rounding `random()*8` will get you up to 8 (which would be invalid if there are only 8 divs). http://jsfiddle.net/5JPWu/2/ – Smern May 22 '13 at 13:34
@smerny -- Thanks! Saves a headache in the future! Mind if I use your fiddle in the answer? – tymeJV May 22 '13 at 13:35
One thing I'm not very clear on is how can I limit the selection only to those divs that I actually want, @timeJV. There's a whole bunch of other (unrelated) divs on that page. The eight divs that I need are all inside another element that has the id of #container. Could you advice, please? – May 22 '13 at 13:39
@Astoria, you could put a class on the divs that you want to choose from (`class="chooseMe"` for example), and then change the selector to match it.. like `$("div.chooseMe").eq(...` – Smern May 22 '13 at 13:44
Thank you, @smerny – and thanks a lot for the fiddle. What's the proper syntax for combining $("div.choseMe").eq with ("+random") from the snippet in the answer? – May 22 '13 at 13:48
1

`$("div.chooseMe:eq(" + random + ")").addClass("yourClass");` – tymeJV May 22 '13 at 13:50
@tymeJV - thanks a lot. This is most helpful. My voting limit is reached for today, but I'll make sure to vote up your answer tomorrow! – May 22 '13 at 13:52
Actually. @tymeJV, looks like I need additional clarification. I should probably ask a separate question for it, though. Would you be okay with taking a look at it? – May 22 '13 at 14:12
Slightly off topic, but I prefer chaining the `.eq()` function rather than adding `:eq()` to the selector. It also appears to be faster. http://jsperf.com/eq-selector-vs-eq-function-in-jquery/3 – Smern May 22 '13 at 14:14
I just applied the snippets you've created, guys, and it works great, except again, I made a mistake formulating the question. As I just realized, the actual structure I'm working on is this:
Link text – and I have to have both the a and teh div contained in it targeted. How would I need to modify the snippet, @smerny? – May 22 '13 at 14:20
Or @timeJV? Help would be very much appreciated! – May 22 '13 at 14:21
`$("a.chooseMe").children("div").eq(" + random + ").addClass("blah");` should do it – tymeJV May 22 '13 at 14:22
Nope, something's not working, @timeJV. Could you kindly take a look at the actual web page: http://dev.steinwaymusical.com.php53-2.dfw1-2.websitetestlink.com – the eight links are under OUR PRODUCTS in the hero image, and the images are supposed to pop up when the class is attached. – May 22 '13 at 14:27
`$("a.chooseMe").eq(random).children("div")` I think is what you are looking for... assuming you have multiple `a`'s with the same structure and you want to affect the `div` inside of it? You could also just put the `chooseMe` class name on the `div` (instead of the `a`) and keep it as `$("div.chooseMe")...` – Smern May 22 '13 at 14:40

Select random item out of known number of items

4 Answers4