Add class to random li in all ul's

Question

<div id="question-1" name="question" 
    <ul>  
        <li name="347815" class="MULTIPLE" id="7548094" value="7548094">1</li>
        <li name="347815" class="MULTIPLE" id="7548095" value="7548095">2</li>
        <li name="347815" class="MULTIPLE" id="7548096" value="7548096">3</li>
        <li name="347815" class="MULTIPLE" id="7548097" value="7548097">4</li>
    </ul>
</div>

<div id="question-2" name="question" 
    <ul> 
        <li name="347818" class="MULTIPLE" id="7548140" value="7548140">1</li>
        <li name="347818" class="MULTIPLE" id="7548143" value="7548143">2</li>
        <li name="347818" class="MULTIPLE" id="7548168" value="7548168">Hemköp</li>
        <li name="347818" class="MULTIPLE" id="7548169" value="7548169">3</li>
        <li name="347818" class="MULTIPLE" id="7548184" value="7548184">4</li>
        <li name="347818" class="MULTIPLE" id="7548195" value="7548195">5</li>
        <li name="347818" class="MULTIPLE" id="7548208" value="7548208">6</li>
    </ul>
</div>

I need a js "jquery" code to select a random li element from all ul lists. The list number changes constantly so I need to use something like .find();

This is the code that I have right no but it doesn't select one li in all ul, it selects random li in random ul:

var list = $('ul > li');
list.eq(parseInt(Math.random()*list.length)).addClass('selected');

Thank you guys :)

UPDATE:

@MTCoster has the right answer, here is it:

$("ul").each(function() { var liArr = $(this).children("li"); $(liArr[Math.floor(Math.random() * liArr.length)]).addClass('selected'); });

Arithmetic functions return numbers, you don't have to call `parseInt()` on them. — Barmar, Oct 21 '15 at 18:33
The `parseInt()` is being used here in place of `Math.floor()` as per [this](http://stackoverflow.com/questions/5915096/get-random-item-from-javascript-array) question on randomly selecting array elements in JavaScript. — MTCoster, Oct 21 '15 at 18:34
@MTCoster OK, it will work, but it's definitely a confusing way to do it. — Barmar, Oct 21 '15 at 18:36
It's also unnecessary. `.eq()` will convert its argument to an integer automatically. — Barmar, Oct 21 '15 at 18:37
Looks like you're trying to select the same random LI in each UL? If so you could just filter on nth-child instead of using `eq`, something like this -> http://jsfiddle.net/04b0ju4h/2/ — adeneo, Oct 21 '15 at 18:42
@HassanIla Is requirement a) to select different random `li` in each `ul` ? , or b) select random number , select `li` at index of random number from each `ul` ? — guest271314, Oct 21 '15 at 19:16

guest271314 · Answer 1 · 2015-10-21T18:42:40.573

3

Try using .each()

   // select all `ul` elements
   $("ul").each(function() {
      // select all `li` elements that are children of `this` `ul`
      var list = $("> li", this);
      list.eq(Math.random() * list.length).addClass("selected");
   })

edited Oct 21 '15 at 18:42

answered Oct 21 '15 at 18:32

guest271314

1
15
104
177

And to check : more .addClass("selected").prop("checked",true); ;) – Denis Chenu Oct 22 '15 at 07:46

MTCoster · Accepted Answer · 2015-10-22T08:43:13.893

2

The code you have at the moment is creating a single array of all li elements that exist within a ul element, then selecting one of them. What you need to do is select all the ul elements first, then select a random li element from each one. Try something like this:

$("ul").each(function() {
  var liArr = $(this).children("li");
  $(liArr[Math.floor(Math.random() * liArr.length)]).addClass('selected');
});

Edit: you have to wrap the selected element from the array in a jQuery selector; I've updated the code to reflect this.

edited Oct 22 '15 at 08:43

answered Oct 21 '15 at 18:44

MTCoster

5,868
3
28
49

Sorry but it says Uncaught TypeError: liArr[Math.floor(...)].addClass is not a function.. Otherwise this is exactly what I want. – Hassan Ila Oct 22 '15 at 07:01
This is what I need but can someone please fix it so I don't get: Uncaught TypeError: liArr[Math.floor(...)].addClass is not a function.. I will mark it as resolved then.... Thank you – Hassan Ila Oct 22 '15 at 08:30
@HassanIla This error is thrown because you're trying to call a jQuery method on a non-jQuery object. The fix is as simple as wrapping the array element in a jQuery selector. I've updated my answer to reflect this. – MTCoster Oct 22 '15 at 08:44
Thank you so much I've made it as the right answer :) – Hassan Ila Oct 22 '15 at 08:52

Add class to random li in all ul's

2 Answers2