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个分区时，第5个分区必须同时隐藏第4个分区...

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

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

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

3 个答案: