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

我想在我的#container div中添加一个随机类甚至

元素

这是我的代码：

$( "#container li" ).each( $().ready(function() { $("#container li:random").addClass("one"); $("#container li:random").addClass("two"); $("#container li:random").addClass("three"); }) ); 

问题是我有十个

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

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

元素，而剩下的七个

元素没有类。

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

我已经尝试过这篇文章中的片段，但没有一个产生预期的结果，以确保所有元素得到一个随机的类。

谢谢您的帮助。

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] ); }); }); 

Answer 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中的每个列表项中。

Answer 3

我写了一个可能适合你的小jquery插件。 看看： https ： //github.com/cjthedizzy/randomClassJS