以随机顺序将类添加到DIV

时间:2013-12-06 12:01:03

标签: jquery sequence

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

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

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

这可能吗?

2 个答案:

答案 0 :(得分:3)

尝试

$(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

答案 1 :(得分:0)

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