我怎樣才能停止成長div元素的子元素

我有一個<div>元素，其中有多個<img>元素。我怎樣才能停止成長div元素的子元素

用戶可以添加更多的元素<img>這<div>元素，但我希望限制包含在<div>十<img>元素的總數。

爲了達到這個目的，我想使用一個腳本，使第十張圖像顯示後的圖像變爲「無」。誰能幫我？

NEI：是什麼被用來添加'img'標籤？ – cwallenpoole

^@克瓦倫波爾說什麼。最好隱藏它們，因爲它們被添加或阻止它們被添加到第一位。 – Meredith

您可以使用jquery count來計算元素。

然後簡單：

if($("img").next('img').length > 10) 
    next('img').hide();

2013-08-21 00:19:05 alexanderkustov

如果你配合他們進入分度，尺寸正確，以迫使股利只能容納10張圖像，然後沒有更多的將適合你可以添加到div的風格是這樣的：

width: widthOfFiveImages; 
    height: heightOfTwoImages; 
    overflow: hidden;

這將強制所有其他圖像隱藏在div內。

2013-08-21 00:22:48 NoahWillCrow

這假定所有添加圖像的寬度將會/可以被知道。 – Meredith

或者它們可以放入內嵌圖像的嵌套div中，嵌套div具有設定的高度和寬度。但是你是正確的，它需要你知道圖像將佔用的高度和寬度。 – NoahWillCrow

這聽起來更像是一個比jQuery魔法更好的CSS規則。

你可以用第n個孩子選擇這樣做：

#div-id > img:nth-of-type(n+11) { 
    display: none; 
}

爲示意圖見this CodePen。

2013-08-21 00:36:58 Meredith

不應該是n + 10，因爲我們不是在10之後加入？ –

@vamsi對於n = 0，（n + 10）= 10。我們仍然希望顯示第十個。因此我們從n + 11開始。你可以玩CodePen來看看我的意思。 – Meredith

使用jQuery的gt選擇...

$('#yourdiv').find('img:gt(9)').hide();

2013-08-21 00:54:31 jcreamer898

考慮您的div有「集裝箱」爲ID，你可以用這個檢查：

var container = document.getElementById("container"); 
if(container.getElementsByTagName("img").length < 10) { 
    // allow appending new img 
}

2013-08-21 01:01:29 bfavaretto

回答