Добавить класс в DIV в случайной последовательности

Question

Я ищу, чтобы найти способ в jQuery для случайного добавления класса в ряд DIVs в течение определенного периода времени, пока все они не добавили к ним новый класс.

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

Это работает, чтобы добавить класс «флип» к DIVs внутри .cardWrapper DIV, но то, что мне нужно для действия addclass произойти по одному, а в идеале случайным образом - так в основном, каждый из 10 DIVs добавляет к нему класс «флип» в случайной последовательности с определенной задержкой между каждым добавленным добавлением ...

Возможно ли это?

Answer 1

Попробуйте

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

Answer 2

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