添加隨機類到elelment，但不再重複

你好，我有這個代碼，它將一個隨機類添加到列表。我如何避免在列表中再次重複類名？添加隨機類到elelment，但不再重複

$(document).ready(function() { 
    var classes = ["col-1", "col-2", "col-3", "col-4", "col-5", "col-6"]; 

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

來源

2014-01-26 Andrei

嘗試使用拼接從數組

$(document).ready(function() { 
    var classes = ["col-1", "col-2", "col-3", "col-4", "col-5", "col-6"]; 

    $("#megamenu #nav li").each(function() { 
     var idx = ~~ (Math.random() * classes.length); 
     $(this).addClass(classes[idx]); 
     classes.splice(idx, 1) 
    }); 
});

演示除去使用的項目：Fiddle

來源

2014-01-26 13:17:48

這將無法正常工作 –

@ΘεόφιλοςΜουρατίδης的http：//的jsfiddle .net/arunpjohny/BLBBd/1 /？ –

我的不好，我還以爲別的東西 –

假設你有li是你們等有許多獨特的類，你可以這樣做這個。

function shuffle(obj) { 
 
    var i = obj.length; 
 
    var rnd, tmp; 
 

 
    while (i) { 
 
    rnd = Math.floor(Math.random() * i); 
 
    i -= 1; 
 
    tmp = obj[i]; 
 
    obj[i] = obj[rnd]; 
 
    obj[rnd] = tmp; 
 
    } 
 

 
    return obj; 
 
} 
 

 
var classes = ["col-1", "col-2", "col-3", "col-4", "col-5", "col-6"]; 
 

 
shuffle(classes); 
 
$("#megamenu #nav li").each(function() { 
 
    $(this).addClass(classes.pop()); 
 
});

.col-1 { 
 
    background-color: red; 
 
} 
 

 
.col-2 { 
 
    background-color: blue; 
 
} 
 

 
.col-3 { 
 
    background-color: yellow; 
 
} 
 

 
.col-4 { 
 
    background-color: green; 
 
} 
 

 
.col-5 { 
 
    background-color: pink; 
 
} 
 

 
.col-6 { 
 
    background-color: white; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="megamenu"> 
 
    <ul id="nav"> 
 
    <li>1</li> 
 
    <li>2</li> 
 
    <li>3</li> 
 
    <li>4</li> 
 
    <li>5</li> 
 
    <li>6</li> 
 
    </ul> 
 
</div>

首先，我們使用費雪耶茨洗牌洗牌classes，我們然後從classes一個條目，並將其分配給li，這樣就不能再次使用。

來源

2014-01-26 13:37:08 Xotic750

許多選項：

如果您不希望再次使用相同的類，然後從數組中刪除它，一旦你使用它使用splice作爲已經回答了。
如果您想將類保留在數組中（可能稍後再使用它），您可以將使用的類添加到第二個數組（我們稱之爲黑名單），然後在使用類之前檢查它們是否已經在blacklist中。

選項2實施：

$(document).ready(function() { 
    var classes = ["col-1", "col-2", "col-3", "col-4", "col-5", "col-6"]; 
    var blacklist = []; 
    $("#megamenu #nav li").each(function() { 
     var index = ~~ (Math.random() * classes.length); 
     var currClass = classes[index ]; 
     if(! $.inArray(currClass , blacklist)) //or you can use the array index instead of class name.  
     $(this).addClass(currClass); 
     blacklist.push(currClass);   
    }); 
});

3.使用類陣列作爲一個對象，並把使用屬性一旦類已被使用。

$(document).ready(function() { 
    var classes = { 
     0:{name:"col-1", used:false}, 
     1:{name:"col-2", used:false}, 
     2:{name:"col-3", used:false}, 
     3:{name:"col-4", used:false}, 
     4:{name:"col-5", used:false}, 
     5:{name:"col-6", used:false} 
     }; 
    $("#megamenu #nav li").each(function() { 
     var index = ~~ (Math.random() * Object.keys(classes).length);    
     if(classes[index].used === false)) 
     $(this).addClass(classes[index].name);    
    }); 
});

來源

2014-01-26 15:49:19 MJoraid

因爲在你的應用程序沒有關鍵的依賴性，你可以使用sort作爲一種原始的洗牌：

$(document).ready(function() { 
    var classes = ["col-1", "col-2", "col-3", "col-4", "col-5", "col-6"]; 
    classes.sort(function(){ return Math.random() - .5 }); 

    $("#megamenu #nav li").each(function(){ 
     $(this).addClass(classes.pop()); 
    }); 
});

jsFiddle

來源

2014-01-26 16:23:15 Emissary

添加隨機類到elelment，但不再重複

回答

相關問題