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

【问题标题】：Apply a random class to every element specified将随机类应用于指定的每个元素
【发布时间】：2011-12-02 22:47:07
【问题描述】：

我正在尝试向我的#container div 中的

元素添加一个随机类

这是我的代码：

$( "#container li" ).each(  

  $().ready(function() {

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

    })
    );

问题是我有十个

元素，我希望这些元素中的每一个都以随机方式接收三个可能的类之一。

但是我上面的代码只分配了三个

元素的类，剩下的七个

元素没有类。

我尝试过其他的 sn-ps 代码，但没有一个会随机将类列表应用于指定的所有元素。

我已经从这篇帖子HERE 中尝试了 sn-ps，但没有一个能产生确保所有元素都获得随机类的预期结果。

感谢您的帮助。

【问题讨论】：

发布更多代码，或者更好的是，制作一个 jsfiddle.com

标签： jquery css random

【解决方案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] );
    });
});

【讨论】：

完美，非常感谢 - 完全按照我的意愿工作。
有什么方法可以确保每个类都设置一次。您的代码可以为多个元素设置类。
@karadayi 您希望在使用时从数组中删除每个类。我将用一个例子来编辑我的答案。
@karadayi 添加示例，使用拼接从数组中删除类。

【解决方案2】：

这样的事情可能会奏效：

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

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

相应的 HTML DOM 可能如下所示：

ul#container
    li
    li
    li

实际上，我采用了 onload 语句并将 .each 函数放入其中。其次，我在 each() 语句中添加了一个 function(){}。此函数从 0-4 中随机选择一个数字；每个数字对应于 rndmClass 数组中的一个类，并将该类添加到 #container 中找到的每个列表项中。

【讨论】：

【解决方案3】：

我写了一个可能对你有用的小 jquery 插件。看看这个： https://github.com/cjthedizzy/randomClassJS

【讨论】：