Question

我有一个div，我希望能够将子项添加到顶部并从动态中删除底部的子元素。有点像rss自动收报机。父div经常会有新的孩子。有一个条件来测试孩子的数量，然后在最后一个孩子达到所需的最大孩子长度后将其移除。这是通过setInterval（）连续完成的。

setInterval(function(){
    var newbox = "<div class='child  animated bounceInDown'></div>"
    $(newbox).prependTo('#container').hide().slideDown(500);
    var dlength = $('.child').length;
    console.log(dlength);

    if (dlength >=5){
        $(".child:last").fadeOut();
     }
}, 2000);

目前使用我的代码，我可以使用填充了父div最大所需长度的计数器来删除最后一个子div。

问题是它只在第一个间隔期间删除了最后一个div。我将计数记录到控制台并且可以看到计数增量，因此我的条件应该触发。

我的想法是我的问题是由于没有事件委托。基本上，当我尝试删除它时，div不在DOM中。话虽这么说，我不确定我是否需要监听父节点上的事件或附加处理程序。有什么想法吗？

这是一个小提琴的例子：

http://jsfiddle.net/luskbo/tcq8kuy6/9/

Answer 1

问题是你总是淡出DOM中的最后一个元素，而不是最后一个可见元素。如你所说，你总是在褪色相同的元素。

$(".child:visible:last").fadeOut();应该诀窍。（它在JSFiddle中工作）添加了:visible选择器。

Anant建议的另一个选择是从DOM中删除元素而不是将其淡出，这取决于您可能想要实现的目标。如果你不需要将元素保留在DOM中，那么移除它可能是一个好习惯。

$(".child:visible:last").fadeOut(400,function(){
  $(this).remove();
});

删除动态创建的div的上次出现

1 个答案: