将随机类应用于指定的每个元素

Question

我想在我的#container div中添加一个随机类甚至<li>元素

这是我的代码:

$( "#container li" ).each(  

  $().ready(function() {

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

    })
    );

问题是我有十个<li>元素,我希望这些元素中的每一个以随机方式接收三个可能类中的一个.

但是我上面的代码只分配了三个<li>元素,而剩下的七个<li>元素没有类.

我已经尝试了其他代码片段,但没有一个代码随机地将类列表应用于指定的所有元素.

我试图从这篇文章摘录的位置,但无论哪一种都不确保所有元素得到一个随机类的期望的结果.

谢谢您的帮助.

Answer 1

您可以使用一个类数组,然后将该数组中的随机类分配给匹配选择器的每个元素,如下所示:

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

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

如果要确保每个类仅使用一次,则可以在使用它时将其从数组中删除:

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

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