我怎样才能停止成长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

回答