預先一個div給隱藏最後一個孩子的div

我打算在一定的時間間隔前加上兩個div來保存5個div的主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格5日必須牆根同樣4格爲7格...

，也是我沒有正確循環它。引導我在這裏

來源

2013-07-25 Jhonny

的setInterval不應該使用!!!! 如果您的代碼執行時間較長，那麼時間間隔將會在未知的時間執行，並且可能會導致您期望的順序不同。例如：迭代#X已經開始，但是在它完成迭代＃X + 1的啓動和結束之前（因爲間隔每X毫秒觸發一次），所以結果將是＃X + 1的輸出，然後是#X。查看http://jsfiddle.net/53aht/11/如何將您的代碼轉換爲setTimeout。 – CodeWizard

所以你只想要前五個元素可見。您可以使用jQuery slice()方法將集合限制爲從第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/

來源

2013-07-25 08:46:48 pawel

謝謝你。我怎麼能循環添加只有兩個更多的div ...... – Jhonny

你能澄清？如果你想在一定延遲後只添加兩個div，那麼你應該使用setTimeout。 – pawel

是的，我試過它無限循環而不是停止在兩個div – Jhonny

這裏是你想要做什麼。 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; 
}

來源

2013-07-25 08:51:30 CodeWizard

謝謝。如何在預先掛上兩個div後停止它並延遲第一個div – Jhonny

是否有一種方法可以減慢隱藏和顯示div – Jhonny

嘗試是這樣的：

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

來源

2013-07-25 09:17:47 Alexandra

預先一個div給隱藏最後一個孩子的div

回答

相關問題