我有多个div组,我需要将一个随机类应用于每个组,每个组中都不要重复.完成此操作后,我需要将数组“重置”为原始值,然后移至下一组div,在该组中我再次将随机类应用于每个div.

这个想法是要达到如下所示：

<div class="mini-thumbnail-container">
    <div class="mini-thumbnail-individual-image left">
    <div class="mini-thumbnail-individual-image centre">
    <div class="mini-thumbnail-individual-image right">
</div>

<div class="mini-thumbnail-container">
    <div class="mini-thumbnail-individual-image centre">
    <div class="mini-thumbnail-individual-image right">
    <div class="mini-thumbnail-individual-image left">
</div>

<div class="mini-thumbnail-container">
    <div class="mini-thumbnail-individual-image right">
    <div class="mini-thumbnail-individual-image left">
    <div class="mini-thumbnail-individual-image centre">
</div>

等等

我毫不客气地从另一个*问题中获取了代码来解决这个问题,但是我无法弄清楚如何使它在我的所有元素(而不是前三个元素)上都能正常工作.

这是jQuery：

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

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

var classes = ["centre", "left", "right"];
shuffle(classes);

jQuery(".mini-thumbnail-individual-image").each(function() {
    jQuery(this).addClass(classes.pop());
});

这是我的div结构的基本概述–我想遍历这些结构的倍数,并将随机类应用于每个< div class =“ mini-thumbnail-individual-image”>

HTML：

<div class="col-1-6">
    <div class="mini-thumbnail-container">
        <div class="mini-thumbnail-individual-image">
            <img class="mini-thumbnail-image" src="" />
        </div>
        <div class="mini-thumbnail-individual-image">
            <img class="mini-thumbnail-image" src="" />
        </div>
        <div class="mini-thumbnail-individual-image">
            <img class="mini-thumbnail-image" src="" />
        </div>
    </div>
</div>

我想我需要创建一个循环,该循环看起来要在数组的每次迭代后触发,一旦发现数组为空,我就需要将类名推回去,然后遍历下一组div,直到每个一组div应用了一个随机类,但也许还有一种我还没有想到的简单方法.

提前致谢！

解决方法:

您走在正确的轨道上.

无需谈论优化代码的方法,这是一种快速到达所需位置的方法：

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

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

// declare OUTSIDE the function for correct scope
var classes;

// Simple function to set up the classes variable and shuffle.
function setUpClasses() {
    classes = ["centre", "left", "right"];
    shuffle(classes);
}

jQuery(".mini-thumbnail-individual-image").each(function() {
    // Check if classes is set / empty.  If so, set up the classes again.
    if (!classes  || classes.length < 1) {
        setUpClasses();
    }
    jQuery(this).addClass(classes.pop());
});

如果您想了解更干净/更简洁的方法来随机排列数组,那么this article还有其他一些技术.这是其中之一：

yourArray.sort(function() { return 0.5 - Math.random() });

因此,您可以从字面上删除您的shuffle函数,然后执行以下操作：

function setUpClasses() {
    classes = ["centre", "left", "right"];
    classes.sort(function() { return 0.5 - Math.random() });
}

或者,如果您想要最大程度的简洁：

function setUpClasses() {
    classes = ["centre", "left", "right"].sort(function() { return 0.5 - Math.random() });
}

Here is a working Fiddle