javascript - 将 paragraph 添加到 div 中，但如果该 div 已有 2 个段落，则创建一个新 div

Question

我有一个 div .content，里面有两个 div (.content-1, .content-2)。

在 .content 内的 div 中，我只想最多有两个段落。

因此，当我单击“添加”按钮时，我想在只有一个或零个段落的 div 内添加一个段落，如果有 2 个段落，我想创建一个新的 div .content-3 并将该段落添加到这第三个 div，当这第三个 div 有两个段落时，我想创建一个新的 div .content-4，依此类推..

我正在尝试这样做，并且我已经完成了当 div 有 1 个或零个段落时添加段落的部分。但现在，如果其他部分已经有两个 div，则创建新 div 的部分无法正常工作。

你明白为什么这是错误的吗？

我这里有我的示例:http://jsfiddle.net/e2f38kgL/1/

html:

  <div class="message">
        <input type="text" id="input" onclick="clear();" value="text:"><br>
        <button id="import" class="btn">add</button>
    </div>
<div class="content">
   <div class="content-1">
       <p>text 1</p>
        <p>text 2</p>
   </div>
   <div class="content-2">
       <p>text 1</p>
   </div>
</div>

jquery:

$(document).on('click', '.btn', function(){ 
    var input = $("#input").val();
    var maxdivSize = 2;
    var divContentSize = $(".content > *").length;
    $(".content >*").each(function(){
        var i = 0;
        var numberOfElements = $(this).find("p").length;
        if (numberOfElements < 2){
            $(this).append("<p> "+ input + "</p>");
        }
        else{
            $(".content").append("<div class='content-"+i+1+"'>"+input+"</div>");
        }
        i++;
    });

}); 

Answer 1

尝试使用此代码，

$(document).on('click', '.btn', function () {
    var input = $("#input").val();
    var divContentSize = $(".content > *").length;
    var relDiv = $(".content > div").filter(function () {
        return $(this).children().length !== 2;
    });
    if (relDiv.length) {
        relDiv.append("<p> " + input + "</p>");
    } else {
        $(".content").append("<div class='content-" + (divContentSize + 1) + "'><p>" + input + "</p></div>");
    }
});

$(document).on('click', '#input', function () {
    $('#input').val('');
});

DEMO