Question

我有一个div .content里面有两个div（.content-1，.content-2）。

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

所以，当我点击按钮＆＃34;添加＆＃34;我想在一个只有一个或零段的div中添加一个paragrah，如果有2我想创建一个新的div .content-3并在第三个div中添加这个段落，当这第三个div有两个段落时我想要创建一个新的div .content-4，等等..

我试图这样做，而且我已经完成了一个部分，即当div有1或0段时我添加了一个段落。但是现在，如果其他人已经拥有两个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('');
});

将<p>段</p>添加到div中，但如果div已经有2个段落，则创建一个新的div

1 个答案:

DEMO