簡體   English   中英

HTML / jQuery限制編號 容器中的div數

[英]HTML/jQuery Limit no. of divs in container

(首先我建議查看相關圖像)我有3個具有相同類.container的容器。 此外,用戶可以將子div動態添加到容器中。 用戶將通過單擊每個“ .parent”內的“ .add” div開始添加div(即.parent)。 容器最大可容納3格。 如果用戶已經添加了3個div,則下一個div應該進入第二個容器,依此類推。 最后一個容器(第三個容器)裝滿后,將彈出警報,提示“您無法再添加div”。

我有兩個問題:

使用jquery,如何將每個容器的“ .parent” div數量限制為3。如果用戶嘗試添加另一個容器,則將其添加到容器2(除非容器2具有3個子div,否則它將進入容器3)?

一旦第3頁的容器已滿(3格),便會彈出警告,提示“您無法再添加div”。

我只有的一小段代碼無法正常工作。 請幫助我的代碼。 我在所有這些方面都是新手。

提前致謝。

相關圖像:[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>

您必須跟蹤自己添加的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;

您的代碼中的幾個問題

當您單擊按鈕時,您需要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 );
    }     
});

演示

filter()API文檔

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM