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

Question

我想添加一个随机的类甚至< LI>我的#container DIV

这里内元素是我的代码：

$("#container li").each( 

    $().ready(function() { 

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

    }) 
    ); 

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

但是，我上面的代码只分配三个< li>元素，其余的七个< li>元素无class-less。

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

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

谢谢你的帮助。

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（）语句中添加了一个function（）{}。此功能从0-4随机选择一个数字;每个数字都对应于rndmClass数组中的一个类，并将该类添加到#container中的每个列表项中。

Answer 3

我写了一个可能适合你的jQuery插件。检查出来： https://github.com/cjthedizzy/randomClassJS