javascript - jQuery $.each() 方法未按预期运行

Question

今天早上我正在尝试一个实验:循环遍历多个列表项并对它们执行函数。一旦对所有项目执行该函数，我将再次调用该函数(类似于使用递归函数执行的操作)并重新开始。这是代码:

function fade(element) {
    var totalElements = element.length - 1;

    $.each(element, function(index) {
        console.log(index);
        $(this).eq(index).fadeIn(1000, function(){
            $(this).delay(500).fadeOut(1000, function(){
                if(index < totalElements) {
                    console.log(index);
                }
            });
        });
    });

}

var $pictures = $('.fader li');
fade($pictures);

HTML 是一个简单的无序列表，您可以在此示例中看到 - http://jsfiddle.net/jayblanchard/AP6qT/

发生的情况是，在调用第一个 fadeIn() 之前，第一个 console.log(index) 按顺序返回每个索引。第一个淡入淡出周期被调用，第二个 console.log(index) 发生，仅输出 0。

这里发生了什么？为什么 $.each() 不循环遍历每个图像并执行功能，为什么控制台日志会立即吐出所有索引？

编辑:我将尝试每种形式的其他形式，看看是否得到相同的结果。

Answer 1

在 each() 内，this 引用当前 元素。在本例中，它将是一个单个 HTML 元素。

您将单个 HTML 元素包装在 jQuery 对象中，然后在该 jQuery 对象上调用eq(index)，该对象仅包含一个强>元素。

一旦超过了 index == 0，eq() 就不会匹配任何内容，从而导致空的 jQuery 对象，从而导致没有实际 对您认为存在的元素进行 fadeIn 或 fadeOut 调用。这就是为什么您只能在第一个元素上看到 fadeOut。

只需删除 eq(index) 和 it'll work 。您不会看到 console.log(2)，因为您专门使用 if 条件将其排除。