以随机顺序将类添加到 DIV答案

【问题标题】：Add Class to DIV in random sequence以随机顺序将类添加到 DIV
【发布时间】：2013-12-23 18:33:40
【问题描述】：

我希望在 jQuery 中找到一种方法，在一段时间内将一个类随机添加到一系列 DIV，直到它们都添加了新类。

$(document).ready(function(){
$(".cardWrapper > div").addClass('flip');
});

这可以将“翻转”类添加到 .cardWrapper DIV 内的 DIV，但我需要的是 addclass 操作一次发生一个，理想情况下以随机方式发生 - 所以基本上，10 个中的每一个DIV 以随机顺序将“翻转”类添加到其中，每个添加类之间有一个可定义的延迟...

这可能吗？

【问题讨论】：

你能做一个小提琴吗？
查看setInterval、setTimeout 等以了解延迟和Math.random() 以选择元素，从那里开始就很容易解释了。

标签： jquery sequence

【解决方案1】：

function shuffle(array) {
  var m = array.length, t, i;

  // While there remain elements to shuffle…
  while (m) {

    // Pick a remaining element…
    i = Math.floor(Math.random() * m--);

    // And swap it with the current element.
    t = array[m];
    array[m] = array[i];
    array[i] = t;
  }

  return array;
}

鉴于随机播放，您可以随机选择 X 个元素

var items = shuffle($(".cardWrapper")).slice(0, X);

然后您可以为该项目应用您的类。

这就是我为我的要求所做的。逻辑来自jQuery select random elements with same class

【讨论】：

【解决方案2】：

试试

$(document).ready(function () {
    var $divs = $(".cardWrapper > div");
    var interval = setInterval(function () {
        var $ds = $divs.not(".flip");
        $ds.eq(Math.floor(Math.random() * $ds.length)).addClass('flip');
        if ($ds.length == 1) {
            clearInterval(interval);
        }
    }, 500);
});

演示：Fiddle

【讨论】：

结束！像梦一样工作！非常感谢您的帮助