Question

我有几个同一个班级的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)]);
    });
});

我会对任何帮助都很亲切 - 我是一个血腥的初学者：）

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

Answer 2

我会在你使用它之后从数组中删除它，所以它不能再次使用，随机数会更小。如果您需要其他内容的数组，只需创建一个副本来执行此操作。

Answer 3

这将有助于您确保拍摄效果：

$(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/

Answer 4

这将获得一个随机索引，直到它与最后使用的索引不同。

$(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]);

   });

});

随机添加具有相同类的div的类

4 个答案: