javascript - 如何停止为 div 增长子元素

Question

我有一个<div>包含多个<img>元素的元素。

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

为了实现这一点，我想使用一个脚本，使第十张图像之后的图像显示为“无”。谁能帮我？

Answer 1

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

然后是一个简单的：

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

Answer 2

使用 jQuery 的gt选择器...

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

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

Answer 3

如果您将它们放入尺寸正确的 div 中，以强制 div 只能容纳 10 张图像，然后不再适合，您可以在 div 的样式中添加如下内容：

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

这将迫使所有其他图像隐藏在 div 中。

Answer 4

这听起来更像是一个好的 CSS 规则的例子，而不是一个 jQuery 魔术的例子。

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

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

有关说明，请参阅此 CodePen。

Answer 5

考虑到您的 div 将“容器”作为其 ID，您可以检查以下内容：

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