Question

我有两个div .content。

我有一个按钮＆＃34;添加＆＃34;将段落添加到.content divs。

我想在每个.content div中最多包含3个段落，当这两个.content div已经有3个段落时，我想创建一个新的.content div并在那里添加新的段落。

但它不能正常工作，当我向.content div添加一个新段落时，段落会添加到所有.content div中，我只想在一个div中添加一个段落。

你知道如何正确地做到这一点吗？

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


$(document).on('click', '#add', function () {
    var input = $("#input").val();
    alert(input);
    var divContentSize = $(".container > *").length;
    alert(divContentSize);
    var relDiv = $(".container > div").filter(function () {
        return $(this).children().length !== 3;
    });

    if (relDiv.length) {
        relDiv.prepend("<p>" + input + "</p>");
    }
    else {
        $(".container").append("<div class=content><p>" + input + "</p></div>");
    }

}); 


$(".prev").click(function(){
    if ($(".container .content:visible").next().length != 0)
        $(".container .content:visible").fadeOut(function(){
            $(this).next().fadeIn();
        });
    else {
        $(".container .content:visible").fadeOut(function(){
            $(".container .content:first").fadeIn();
        });
    }
    return false;
});

$(".next").click(function(){
    if ($(".container .content:visible").prev().length != 0) { 
        $(".container .content:visible").fadeOut(function(){
            $(this).prev().fadeIn();
        });}
    else {
        $(".container .content:visible").fadeOut(function(){
            $(".container .content:last").fadeIn();
        });
    }
    return false;
});

Answer 1

你可以看看这个小提琴，看它是否能完成你想要的一切。我只是为了显示功能而剥离你的小提琴，并且还可以更轻松地浏览特定问题的代码。 Fiddle

我基本上使用jquery遍历元素并决定点击事件的位置：

$(document).ready(function(){
$("#add").click(function(){
    //get last child of class content of container
    var children = $(".container").children(".content");

    //add new content if none exist
    if(children.length <= 0 || $(children[children.length-1]).children("p").length == 3){
        var div = $("<div class='content'/>");

        $(".container").append(div);
    }

    //refresh children
    children = $(".container").children(".content");

    $(children[children.length - 1]).append("<p>Newly added</p>");

});
});

UPDATE：刚刚更新了小提琴，因此更容易看到正在添加到DOM的div和p标签的分离

新小提琴：Fiddle

更新：使用评论中所述的两个div内容更新了小提琴。 Updated Fiddle

匹配以下代码：

    function addP2div(div){
    $(div).append("<p>Newly added</p>");
}

$(document).ready(function(){
    $("#add").click(function(){
        //get children of class content of container
        var children = $(".container").children(".content");

        //set variable to see if added
        var added = false;

        //add new content if none exist
        if(children.length > 1){
            //check each child to see if it can accept a third p        
            for(i=0;i<children.length;i++){
                var elem = children[i];
                //skip if 3 p exist
                if($(elem).children("p").length == 3){
                    continue;
                }

                //add p here
                addP2div(elem);

                added = true;
                break;
            }
        }

        //create new div and add to it
        if(!added){
            var div = $("<div class='content'/>");

            $(".container").append(div);


            addP2div($(".container").children('.content').last());
        }
    });
});

每个<p>都添加在所有.content div中，而不仅仅是一个

1 个答案: