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/

第一个console.log(index)在调用第一个fadeIn()之前按顺序返回每个索引会发生什么。调用第一个淡入淡出循环，出现第二个console.log(index)，仅输出0。

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

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

Answer 1

在each()内，this指的是当前元素。在这种情况下，它将是单个 HTML元素。

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

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

只需删除fadeOut和it'll work即可。您不会看到eq(index)，因为您已将console.log(2)条件明确排除在外。

jQuery $ .each（）方法的行为不符合预期

1 个答案: