javascript - 如何使用jquery随机删除同一类的元素

Question

我有大约 72 个 class="box"的分区

这些是覆盖我整个页面的一些黑色框，我想在我的一个函数完成后随机地一个一个地删除这些部分。

这是我随机删除这些盒子的方法，

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;
    }
}

稍后我还会在两次移除之间添加一些时间延迟，但现在我只想知道如何一个一个地移除这些框。

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();
    });
})();

元素将一次消失一个，当没有更多的 .box 元素时，循环将自动终止。

参见 http://jsfiddle.net/alnitak/cddhL/用于演示。