javascript - How to randomly remove elements of same class using jquery

Question

I have about 72 divisions of class="box"

these are some black colored boxes covering my whole pages, and i want to remove these divisions one by one and randomly after the completion of on of my function.

Here is what i am doing to remove these boxes randomly,

function removeBoxes(){

    var erase;
            //var to store the length of array of divisions
    var total = $(".box").length;
    while(total > 0)
    {
              //generating a random number
        erase = Math.floor(Math.random() * total);
        $(".box").eq(erase).fadeOut(10000, function(){
            $(this).remove();
        });
        total = $(".box").length;
    }
}

Later i would also add some time delay between two removals, but for now i just want to know how to remove these boxes one by one.

Answer 1

小さなプラグインはどうですか：

(function($) {
    $.fn.random = function() {
        var n = this.length;
        var r = Math.floor(n * Math.random());
        return n ? $(this[r]) : $();
    };
})(jQuery);

利用方法：

(function iterate() {
    $('.box').random().fadeOut(1000, function() {
        $(this).remove();
        iterate();
    });
})();

要素は一度に1つずつ消え、要素がなくなるとループは自動的に終了し.boxます。

デモについては、 http：//jsfiddle.net/alnitak/cddhL/を参照してください。

Answer 2

function removeBoxes(){

    var total = $(".box").length - 1;
    var randomnumber = Math.floor(Math.random()*total);
    jQuery(".box:eq('"+randomnumer+"')").fadeOut(1000, function() {
        $(this).remove();
    });
}

// これにより、5 秒ごとに DIV が削除されます

setInterval(function(){ 
    removeBoxes();    
}, 5000);

これが役立つことを願っています:)

Answer 3

フェードアウト後に何かをトリガーする方法、つまりボックスを削除するコールバックでそれを行う方法は既に知っています。ループを使用する代わりに、ランダム ボックスを 1 つだけ削除する関数を作成し、それをコールバックで呼び出します。

例：

function removeRandomBox() {
  var boxes = $(".box"); // don't repeatedly search for the boxes
  var total = boxes.length;
  if (length > 0) {
    var erase = Math.floor(Math.random() * total);
    boxes.eq(erase).fadeOut(10000, function(){
       $(this).remove();
       removeRandomBox();
    });
  }
}