Apply a random class to every element specified

Question

I am trying to add a random class to even < li > element within my #container div

Here is my code:

$( "#container li" ).each(  

  $().ready(function() {

        $("#container li:random").addClass("one");
        $("#container li:random").addClass("two");
        $("#container li:random").addClass("three");

    })
    );

The problem is that I have ten < li > elements and I want each of these elements to receive one of the three possible classes in a random fashion.

However my code above only assignes three < li > elements with the classes leaving the remaining seven < li > elements class-less.

I have tried other snippets of code but none of which randomly apply a list of classes to ALL elements specified.

I have tried snippets from this post HERE but none of which produce the desired result of making sure all elements get a random class.

Thank you for your help.

Answer 1

You can use an array of classes and then assign a random class from that array to each element matching a selector like this:

$(document).ready(function(){
    var classes = ["one", "two", "three"];

    $("#container li").each(function(){
        $(this).addClass(classes[~~(Math.random()*classes.length)]);
    });
});

If you want to ensure that each class is only used once, you can remove it from the array when it is used:

$(document).ready(function(){
    var classes = ["one", "two", "three"];

    $("#container li").each(function(){
        $(this).addClass( classes.splice( ~~(Math.random()*classes.length), 1 )[0] );
    });
});

Answer 2

I've written a little jquery plugin that might work for you. Check it out: https://github.com/cjthedizzy/randomClassJS

Answer 3

Something like this may work:

$( function (){
    $( "#container li" ).each( function (){
        var rng = Math.round(Math.random()*4);
        var rndmClass = [ 'one', 'two', 'three', 'four', 'five' ];

        $(this).addClass( rndmClass[rng]);
    });
});

The corresponding HTML DOM might look like:

ul#container
    li
    li
    li

Effectively, I took the onload statement and tucked the .each function inside of it. Secondly, I added a function(){} inside of the each() statement. This function picks a number at random from 0-4; each number corresponds to a class in the rndmClass array, and adds that class to each list item found in your #container.