javascript - HTML/Jquery 如何限制子 div 的数量？

Question

我有 3 页。每个页面都有一个相同类的父 div。用户可以水平地从一页滚动到另一页。此外，用户可以将子 div 动态添加到父容器中。用户将开始从父级添加 div(在第 1 页)。

我有两个问题:

1. 如何使用 jquery 将子 div 的数量限制为 3。如果用户尝试添加另一个它会被添加到第 2 页(除非第 2 页有 3 个子 div，否则它将转到第 3 页) ?

2. 一旦第 3 页的父容器已满(3 个 div)，就会弹出一条警告“您不能再添加 div!”。

请帮帮我。我在所有这些方面都是新手。

提前致谢。

相关图片:

示例代码:

 <script>
$("addbutton").click(function(){
$("#child").appendTo(".parent");
});
</script>


//page 1
<div class= "parent">
<div id= "child1">
</div>
<div id= "child2">
</div>
<div id= "child3">
</div>
</div>

//page 2
<div class= "parent">

</div>

//page 3
<div class= "parent">

</div>

Answer 1

http://jsfiddle.net/w6AAq/

if($(".parent").children().length < 4) {
     console.log('Less then or equal to 3')   
}else {
     console.log('Cannot add any more child elements')   
}