jquery - .each() 的 jQuery 自定义顺序

Question

我成功地使用 .each() 一个接一个地淡入一些块。正如预期的那样，它从第一个元素开始并按顺序移动到下一个元素。

有什么方法可以控制.each() 的顺序吗？而不是 1,2,3,4 等等，例如，1,2,5,9,6,3,4,7,8。

$(window).load(function() {
    $(".blocks").each(function(i) {
       $(this).delay((i + 1) * 500).fadeIn(500);
    });
});

Answer 1

在直接回答您的问题时，.each()按照项目在 jQuery 内部数组中的顺序迭代 jQuery 对象的项目。.each()除了更改它正在迭代的数组中的顺序之外，没有其他方法可以控制使用的顺序。

由于您没有透露如何通过算法确定所需的订单，您的选择是：

1. .each()在调用之前对数组进行排序
2. .each()调用前手动创建所需订单
3. .each()在调用之前对数组进行适当排序的其他一些代码

在代码片段的非常具体的实例中，您可以.each()通过创建一个查找表来查找给定数组索引的所需延迟值，从而以不同的方式解决它，而无需重新排序或重新排序数组。

$(window).load(function() {
    var delayLookup = {1:1,2:2,5:3,9:4,6:5,3:6,4:7,7:8,8:9};
    $(".blocks").each(function(i) {
       var delayTime = delayLookup[i] || i;
       $(this).delay(delayTime * 500).fadeIn(500);
    });
});

Answer 2

你没有说你的订单的逻辑是什么。如果你的意思是随机的，你可以这样做：

$('.blocks')
    .sort(function(item) { return Math.floor(Math.random() * 2) === 1; })
    .each(function(i) {
        $(this).delay((i + 1) * 500).fadeIn(500);
    });

Answer 3

您首先必须按照您想要的方式对数组进行排序，这里似乎是一种随机排序，因此您必须手动创建一个数组并填充元素。然后你可以调用 each 函数。