HTML/jQuery 限制编号容器中的 div答案

【问题标题】：HTML/jQuery Limit no. of divs in containerHTML/jQuery 限制编号容器中的 div
【发布时间】：2014-07-20 14:51:59
【问题描述】：

（首先我建议查看相关图片）我有 3 个具有相同类 .container 的容器。此外，用户可以将子 div 动态添加到容器中。用户将通过单击每个 '.parent' 中的 '.add' div 开始添加 div（即 .parent）。容器最多可以有 3 个 div。如果用户已经添加了 3 个 div，那么下一个 div 应该进入第二个容器，依此类推。一旦最后一个容器（第三个）满了，应该会弹出一个警告说“你不能再添加 div。”

我有两个问题：

使用 jquery 如何将每个容器的 '.parent' div 的数量限制为 3。如果用户尝试添加另一个，则将其添加到容器 2（除非容器 2 有 3 个子 div，否则它将转到容器3)?

一旦第 3 页的容器已满（3 个 div），就会弹出一个警告，提示“您不能再添加 div”。

我拥有的唯一sn-p 代码不起作用。请帮我写代码。我是所有这些东西的新手。

提前致谢。

相关图片：[1]：http://i.stack.imgur.com/zi78d.png

示例代码：

<html>// the containers
    <div class="container"></div>
    <div class="container"></div>
    <div class="container"></div>//divs that are supposed to be appended
    <div class="parent">
        <div class="add"></div>
    </div>
    <div class="parent">
        <div class="add"></div>
    </div>
    <div class="parent">
        <div class="add"></div>
    </div>
    <div class="parent">
        <div class="add"></div>
    </div>. . .
</html>

  <script>
   var $pages = $('.container');
   var child = '$('.add ').parent()';

   $(".add").on('click', function () {

       var childAdded = false;
       $pages.each(function () {
           var $container = $(this);
           if ($container.children().length < 3) {
               $container.append.('child');
               childAdded = true;
               return false;
           }
       });
       if (!childAdded) {
           alert("You can not add any more divs");
       }
   });
       </script>

【问题讨论】：

您要克隆.parent吗？不太清楚你要做什么
无克隆。我想分离和追加。
没有足够的.parent 没有克隆到.container！

标签： javascript jquery html google-chrome-extension

【解决方案1】：

您的代码中有几个问题

当你点击按钮时你想要parent类的实例，而不是所有.parent

在不应该存在的 jQuery 对象周围使用引号时出现语法错误。

这是一个使用filter() 方法的简单方法。

$(".add").on('click', function () {
    /* filter $pages down to first available one with space */
    var $page=$pages.filter(function(){
           return $(this).children().length < 3;
    }).first();

    if( !$page.length ){ /* if no elements returned from filter, they are all full */
       alert("You can not add any more divs");          
    }else{
       /* get instance of parent based on button that was clicked which is "this" */
       var $parent=$(this).closest('.parent');
       $page.append( $parent );
    }     
});

DEMO

filter() API docs

【讨论】：

非常感谢。这正是我想要的。
你实际上已经非常接近你开始的代码了。我只是使用了一种稍微不同的方法，但是一旦你隔离了add 的实例，你的方法也可以工作

【解决方案2】：

您必须跟踪自己添加的 div 数量。然后，使用此信息来确定您应该将其放入哪个.container。如下所示：

var added = 0;

...

$(".add").on('click', function () {
    var target;
    if(added<3) {
        target = $pages[0];
    } else if (added<6) {
        target = $pages[1];
    } else if (added<9) {
        target = $pages[2];
    } else {
        alert("You can not add any more divs");
        return
    }

    $(target).append($(this).parent());
    added += 1;

【讨论】：

扩展性不是很好，如果有50个$pages或者数量不详怎么办？
@charlietfl 可能会使用Math.floor(added/3); 假设所有元素都是按顺序添加的。但这可能是最简单的方法。
也可以使用$pages.eq(/*index*/)来代替获取节点并再次包裹$()
@charlietfl 呵呵，我不知道。谢谢！