應用隨機類的每一個元素指定

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