我怎样才能停止为div生成子元素

Question

我有一个<div>元素，其中包含多个<img>元素。

用户可以向此<img>元素添加更多<div>元素，但我希望将<img>中包含的<div>元素总数限制为十个。< / p>

为了实现这一点，我想使用一个脚本，将第十个图像显示后的图像显示为“无”。任何人都可以帮助我吗？

Answer 1

您可以使用jquery count计算元素。

然后很简单：

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

Answer 2

如果你将它们装入div中，其大小正确，以迫使div只能容纳10个图像，然后再也不适合，你可以添加div的样式：

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

这会强制所有其他图像隐藏在div中。

Answer 3

这听起来更像是一个好的CSS规则，而不是jQuery魔法的情况。

您可以使用nth-child选择器执行此操作：

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

请参阅this CodePen以获取说明。

Answer 4

使用jQuery的gt选择器...

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

http://api.jquery.com/gt-selector/

Answer 5

考虑到您的div有“容器”作为其ID，您可以查看：

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