javascript - 将随机类应用于多组元素，不重复

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