为具有相同类的 div 随机添加类答案

【问题标题】：randomly added classes for divs with same class为具有相同类的 div 随机添加类
【发布时间】：2014-01-07 18:04:35
【问题描述】：

我有几个具有相同类的 div。我想为这些 div 中的每一个随机添加一个（不同的）类，但不会在彼此之后重复添加的类。

这是我的示例 html：

<div class="sometext"> some text here </div>
<div class="sometext"> some other text here </div>
<div class="sometext"> some more text here </div>
<div class="sometext"> some more text here </div>
<div class="sometext"> some more text here </div>

应该添加的示例 css：

.addedclass1 {...}
.addedclass2 {...}
.addedclass2 {...}
.addedclass3 {...}
.addedclass4 {...}

最后我想看到什么：

<div class="sometext addedclass3"> some text here </div>
<div class="sometext addedclass2"> some other text here </div>
<div class="sometext addedclass4"> some more text here </div>
<div class="sometext addedclass1"> some more text here </div>
<div class="sometext addedclass2"> some more text here </div>

我有一些 jquery 可以随机化添加的类，但它允许重复：

$(document).ready(function() {
    var classes = ['addedclass1', 'addedclass2', 'addedclass3', 'addedclass4'];

    $('.sometext').each(function(i) {
        $(this).addClass(
        classes[Math.floor(Math.random()*classes.length)]);
    });
});

如有任何帮助，我将不胜感激——我是一个该死的初学者 :)

【问题讨论】：

标签： jquery css class random shuffle

【解决方案1】：

每次我都会创建一个临时数组，其中包含除以前使用的类之外的类中的所有元素。然后从中随机选择一个。

JS 小提琴：http://jsfiddle.net/9AbRQ/

var classes = ['addedclass1', 'addedclass2', 'addedclass3', 'addedclass4'];
var prevClass = "";
$('.sometext').each(function() {
    var classes2 = [];
    for (var i = 0; i < classes.length; i++) {
        if (classes[i] !== prevClass) {
            classes2.push(classes[i]);
        }
    }
    $(this).addClass(prevClass = classes2[Math.floor(Math.random()*classes2.length)]);
});

【讨论】：

【解决方案2】：

我会在你使用后将类从数组中删除，所以它不能再次使用，随机数会更小。如果您需要该数组来做其他事情，只需创建一个副本即可。

【讨论】：

【解决方案3】：

这只会得到一个随机索引，直到它与上次使用的不同。

$(document).ready(function() {

    var classes = ['addedclass1', 'addedclass2', 'addedclass3', 'addedclass4'], 
        lastIndex = -1;

    $('.sometext').each(function(i) {
        var index;

        do {
            index = Math.floor(Math.random() / (classes.length- 1) * 10); 
        } while(index === lastIndex);

        lastIndex = index;

        $(this).addClass(classes[index]);

   });

});

【讨论】：

【解决方案4】：

这肯定会帮助你，但效果很好：

$(function(){
    $(".sometext").each(function(){
        $(this).addClass("addedclass" + (Math.round(Math.random()*100 % $(".sometext").length) + 1));
    });
});

jsfiddle：http://jsfiddle.net/ashishanexpert/565ZC/1/

或者，如果你想从一个数组中随机添加类，你可以这样做：

$(function(){
    var classList = ["addedclass1", "addedclass2", "addedclass3", "addedclass4"];

    $(".sometext").each(function(){
        $(this).addClass(classList[Math.round(Math.random()*100 % (classList.length - 1))]);
    });
});

jsfiddle：http://jsfiddle.net/ashishanexpert/565ZC/4/

【讨论】：

谢谢！但不幸的是，这似乎并不能避免一个接一个地添加相同的类。无论如何，随机化它效果很好。