javascript-将随机类应用于多个元素组,而无需重复

2019-11-18 08:37:23 阅读：208 来源： 互联网

标签：loops random arrays javascript jquery

我有多个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应用了一个随机类,但也许还有一种我还没有想到的简单方法.

提前致谢！

解决方法:

您走在正确的轨道上.

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

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

标签：loops,random,arrays,javascript,jquery
来源： https://codeday.me/bug/20191118/2026842.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

javascript-将随机类应用于多个元素组,而无需重复