jQuery $.each()方法的行为不符合预期

jQuery $.each() method not behaving as expected

本文关键字：不符合 方法 each jQuery      更新时间：2023-09-26

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

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()不循环遍历每个映像并执行功能，为什么控制台日志立即输出所有索引?

编辑:我打算用另一种形式来试验一下，看看是否能得到相同的结果。

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

你在jQuery对象中包装了单个 HTML元素，但随后在仅包含一个元素的jQuery对象上调用eq(index)。

一旦您通过index == 0, eq()没有匹配，导致一个空的jQuery对象，导致没有实际 fadeIn或fadeOut调用在您认为它们正在的元素上。这就是为什么你只在第一个元素上看到fadeOut。

只要删除eq(index)，它就会工作。您不会看到console.log(2)，因为您在if条件中特别排除了它。

相关文章：