html - 将 div 添加到隐藏最后一个孩子的 div

Question

我计划在某个时间间隔将两个 div 添加到一个包含 5 个 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 个必须同样隐藏第 7 个 div 的第 4 个 div ...

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

Answer 1

所以你只想让前五个元素可见。您可以使用 jQuery slice()方法将集合限制为以 nth 开头的所有元素。

// 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);
}