javascript - 如何在循环中缓存$(this)？

Question

我有以下 jQuery 代码:

$content.each(function(i) {
     $body = $(this);  
     $(this).find('div.field-content')
     .animate(
         {
            'top': 0
         },
         {
             duration: 500, 
             complete: function () {
                 $(this).css('top', 0);
                 setBodyGradient($body);
             }
         }
     );
});

在我的例子中，$content 有 5 个项目。问题似乎是在最后一次迭代中， $content.eq(0) 的动画完整回调尚未触发，当触发时，最新版本的 $ body 被发送到 setBodyGradient 5 次，而不是创建回调时 $body 的版本。

我应该说我在 Drupal 上运行 JQuery 1.4.4，所以这可能是最新 JQuery 中修复的错误还是一个功能？

我知道我可以通过使用 $content.eq(i) 来解决这个问题，但是我很想知道这是设计使然还是错误行为，以及推荐的方法是什么？我应该一直使用 $content.eq(i) 吗？

Answer 1

这样做:

$content.each(function(i) {
     var $body = $(this);  

否则，$body 将是一个全局变量，并将解析为当前正在处理的列表项。当循环结束时，它将解析为最后一个列表项。

由于回调是在循环完成后执行的，$body 将始终解析为列表中的最后一个元素。

使用 var 使 $body 成为 .each() 使用的函数作用域链的一部分。这意味着 $body 将始终解析为“正确”的列表项。

要查看差异，请从此 fiddle 中删除 $body 前面的 var 关键字。并检查您的控制台。