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

Question

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

我有两个问题：

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

2. 一旦第3页的父容器已满（3个div），就会弹出一个警告说＆＃34;你不能再添加div了!!＆＃34;。

请帮帮我。我是所有这些东西的新手。

提前致谢。

相关图片：

示例代码::

 <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')   
}

Answer 2

试试这个

$("addbutton").click(function(){
    if($(".parent").children().length<3)
{
    $("#child").appendTo(".parent");
}
else
{
      alert("You can not add any more divs");
}
    });

http://api.jquery.com/children/

Answer 3

这是我提出的方式：

var $pages = $('.page');
var child = '<div class="child"></div>';

$('button').on('click', function () {

  var childAdded = false;

  $pages.each(function () {
    var $page = $(this);
    if ($page.children().length < 3) {
      $page.append(child);
      childAdded = true;
      return false;
    }
  });

  if (!childAdded) {
    alert('You can not add anymore divs!');
  }

});

我遍历每个.page并检查孩子的数量。如果有少于3个孩子，我会添加一个然后通过返回false从循环中逃脱。

使用小型演示：http://jsbin.com/nuyipuya/3/edit