jQuery:迭代索引切片函数

Question

我设置了一个切片函数，调用.test的索引在.testdiv中以5块为单位渐变。这里有一个演示:http://jsfiddle.net/neal_fletcher/JT4KB/2/
jQuery:

$(document).ready(function () {
    $('.test').each(function (index) {
        $('.test').slice(0, 5).delay(500).fadeIn(300);
        $('.test').slice(5, 10).delay(1000).fadeIn(300);
        $('.test').slice(10, 15).delay(1500).fadeIn(300);
    });
});

这工作得很好，但作为网站将内容管理我想要一个更紧凑的解决方案，因此，而不是必须为每5div编写一个函数，是否有一种方法通过添加额外的500到延迟每5div调用这个函数?这有道理吗?任何建议将非常感激!

Answer 1

给您，先生。

http://jsfiddle.net/JT4KB/17/

$(document).ready(function () {
    setTimeout(function () {
       $('.test').each(function (i) {
         var delay = Math.floor(i/5)*500 + 500;
         $(this).delay(delay).fadeIn(300);
       });
    }, 1000);
});

Answer 2

您可以使用循环来实现这一点。这个循环必须循环' .testdiv的数量'/5次:

$(document).ready(function () {
    setTimeout(function () {
        for (i=0; i<=$('.test').length/5; i++) {
            $('.test').slice(5 * i, 5*(i+1)).delay(500*(i+1)).fadeIn(300);
        };
    }, 1000);
});

Answer 3

你可以像这样给jQuery添加一个新方法:

$.fn.eachSlice = function(size, callback) {
    var $t = $(this);
    for(var i = 0; i < $t.length; i += size) {
        callback.call($t.slice(i, i + size).get(), i / size);    
    }
    return $t;
}

和

$(".test").eachSlice(5, function(sliceIndex) {
   $(this).delay(sliceIndex * 500).fadeIn();
});

http://jsfiddle.net/JT4KB/16/