在不重复的情况下，将随机类应用于多组元素

Question

在不重复的情况下，将随机类应用于多组元素

3

我有多个div组，需要对每个组的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结构基本概述 - 我有多个这样的结构，我想迭代每个

并将随机类应用于每个。

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>

我认为我需要创建一个循环，每次在数组迭代后触发，一旦发现数组为空，就需要把类名重新推回去，然后循环下一组divs，直到每组div都应用了随机类，但也许有一种比我还没想到的更简单的方法。

提前感谢您！

- kieranstartup

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- random_user_name · Accepted Answer

你正在正确的道路上。

不谈优化代码的方法，这里有一种快速到达目标的方式：

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

如果你想寻找更简洁的方式来洗牌数组，可以参考这篇文章中提到的其他技巧。其中之一如下所示：

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