将div前置为隐藏最后一个子级的div

Question

我计划以一定的时间间隔为一个包含5个div的主div准备两个div。当我准备一个新的div时，它应该隐藏列表中的最后一个div。

这里我做了一把小提琴http://jsfiddle.net/vivekdx/53aht/

Html

<div class="container">
 <div class="child">1</div>   
 <div class="child">2</div> 
 <div class="child">3</div> 
 <div class="child">4</div> 
 <div class="child">5</div> 
</div>

CSS

.container{ width:300px; height:300px; background:#eee;}
.child{ width:280px; margin:10px; height:40px; background:#ccc; float:left; text-align:Center; font-size:30px;}

编写脚本

for (i = 0; i < 2; i++) 
{       
 setInterval(function () 
  {
$(".container").prepend('<div class="child">6</div>'); 
   }, 1000);
 }

但效果并不好。

当我准备第6个div第5个div时，第7个div也必须隐藏第4个div。。。

而且我没有正确地循环它。在这里指导我

Answer 1

所以您只想让前五个元素可见。您可以使用jQueryslice（）方法将集合限制为从第n个开始的所有元素。

// prepend a <div />, then get all the children, skip the first 5 and hide the rest.
$(".container").prepend('<div class="child">6</div>').children().slice(5).hide(); 

更新的小提琴：http://jsfiddle.net/53aht/4/

Answer 2

以下是您想要做的操作。http://jsfiddle.net/53aht/11/

但请记住，每次添加新的div时，您的DOM都在增长，因此请考虑从DOM中移除（删除）它。

var counter = 10;
function addDiv() {
    $(".container").prepend('<div class="child">' + (++counter) + '</div>');
    setTimeout(addDiv, 1000);
} 
addDiv();

CSS：

.container {
    width:300px;
    height:300px;
    background:#eee;
    overflow:hidden;
}

Answer 3

试试这样的东西：

for (i = 0; i < 2; ++i) 
{
    setTimeout(function() {
        $(".container").prepend('<div class="child">6</div>').children().slice(5).hide(); 
    } , i * 1000);
}