Prepend a div to a div hiding last child - html

Question

I am planning to prepend two divs at certain interval of time to a main div which holds 5 divs. When i prepend a new div it should hide the last div in the list.
Here i have made a fiddle 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;}
Script
for (i = 0; i < 2; i++)
{
setInterval(function ()
{
$(".container").prepend('<div class="child">6</div>');
}, 1000);
}
But it is not working good.
When i prepend 6th div 5th have to be hided likewise 4th div for 7th div ...
And also i haven't looping it correctly. Guide me here

Answer 1

So you only want to have the first five elements visible. You can limit the collection to all elements starting with nth using jQuery slice() method.
// 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();
Updated fiddle: http://jsfiddle.net/53aht/4/

Answer 2

Here is what you want to do.
http://jsfiddle.net/53aht/11/
but keep in mind that your DOM is growing every time you are adding new div so consider removing (delete) it form the 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

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