JQuery动画回调不在循环中工作(JQuery animate callback not working in loops)

JQuery动画回调不在循环中工作(JQuery animate callback not working in loops)

我有一个jquery操作的帖子列表，当删除表中的一个或多个帖子行时，我希望逐行fadeOut然后从DOM中删除，删除一行的代码如下：

$('.post#' + postID).parent('tr').fadeOut('slow', function() { $('.post#' +postID).parent('tr').remove(); });

它适用于单行删除，但是当我将上面的代码部分放在for循环中时：

for(var i = 0; i < selectedPostIds.length; i ++) { $('.post#' + selectedPostIds[i]).parent('tr').fadeOut('slow', function() { $('.post#' + selectedPostIds[i]).parent('tr').remove(); }); }

动画仍然有效，但DOM元素，即帖子行没有被删除。 有什么建议么？ 提前致谢。

I have a post list manipulated by jquery, when deleting one or more of the post row(s) in the table, I want the row(s) to fadeOut gradually then being removed from DOM, the code for deleting one row is as follows:

$('.post#' + postID).parent('tr').fadeOut('slow', function() { $('.post#' +postID).parent('tr').remove(); });

and it works perfectly for single row deletion, but when I put the above section of code in a for loop:

for(var i = 0; i < selectedPostIds.length; i ++) { $('.post#' + selectedPostIds[i]).parent('tr').fadeOut('slow', function() { $('.post#' + selectedPostIds[i]).parent('tr').remove(); }); }

The animation still works, but the DOM elements, i.e. the post rows didn't get removed. Any suggestions? Thanks in advance.

最满意答案

这是因为在循环中错误地使用了闭包变量。

在回调内部， this是指tr元素，因此您可以使用

for (var i = 0; i < selectedPostIds.length; i++) { $('.post#' + selectedPostIds[i]).parent('tr').fadeOut('slow', function () { $(this).remove(); }); }

另见

在循环中创建闭包：一个常见的错误

It is because of the wrong use of a closure variable in a loop.

Inside the callback this refers to the tr element, so you can use

for (var i = 0; i < selectedPostIds.length; i++) { $('.post#' + selectedPostIds[i]).parent('tr').fadeOut('slow', function () { $(this).remove(); }); }

Also see

Creating closures in loops: A common mistake