将随机类应用于不重复的多组元素

Question

我有多个 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>

等等

我无耻地从另一个 stackoverflow 问题中提取代码来处理这个问题，但我不知道如何让它适用于我的所有元素，而不是前三个。

这是 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 都应用了一个随机类，但也许还有一种我还没有想到的更简单的方法。

提前致谢！

Answer 1

你在正确的轨道上。

不谈优化代码的方法，这里是（一种）快速到达您需要的地方的方法：

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() });

所以你可以从字面上删除你的随机播放功能，然后这样做：

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