jQuery追加顺序？

Question

我正在创建一系列 cmets，并对它们下方的 cmets 进行回复。我使用此代码将新回复附加到评论下方。

$(document).on('click', '.sub-reply1-send', function() {
    var reply = $('textarea[name=comment-reply]').val();
    $('.sub-reply1, .sub-reply1-textarea, .sub-reply1-send').slideUp(250).remove();
    $('.answer').append("<div class='comment-sub-reply' style='display:none'>" + reply + "</div>");
    $('.comment-sub-reply').slideDown(250);
    subreply_visible = false;
});

如果只有一条评论要回复，这很好用，但如果有两个 cmets，假设 Comment1 和 Comment2，Comment1 将在 Comment2 下生成。回复 Comment1 可以正常工作，但回复 Comment2 会在 Comment1 的最后一个下方生成回复框。

我有什么方法可以让它附加到点击它的评论中吗？

编辑：根据我所拥有的生成 HTML 标记。

<div id="right-bar" class="flexcroll" style="display: block;">
    <div class="question" style="display: block;">
        <div class="question-content">What is the significance of this section?</div>
    </div>
    <div class="answer" style="display: block;">
        <div class="question-answer" style="" id="thread1">This is not a test
            <img class="reply" src="reply.png" />
        </div>
        <div class="question-answer" style="" id="thread0">Test
            <img class="reply" src="reply.png" />
        </div>
        <div class="comment-sub-reply" style="">Another Test</div>
        <div class="comment-sub-reply" style="">Still underneath Test</div>
        <div class="comment-sub-reply" style="">This isn't a test either, but it's appearing under test</div>
        <div class="sub-reply1" style="">
            <textarea class="sub-reply1-textarea" name="comment-reply" style=""></textarea>
            <div class="sub-reply1-send" style=""></div>
        </div>
    </div>
    <div id="comment">
        <form name="commentForm">
            <textarea type="text" name="comment" id="answer-text-input" align="top" class="flexcroll" style="display: block;"></textarea>
        </form>
        <div id="button" style="display: block;"></div>
    </div>
</div>

JQuery 的其他方面不影响它，只有这个函数创建子 cmets。到目前为止，唯一的线程 ID 并没有做任何事情，但我正在努力使这项工作分离 cmets。

Answer 1

使用 jquery .after()。使用它，您可以在为 .after() 函数提供的元素之后添加一个新元素。

所以可能在做 $('.answer').append() 你应该做 $(this).after()。这里this会指向被点击的元素

Answer 2

你可以试试这样的：

$(document).on('click', '.sub-reply1-send', function() {
    // Get the current answer we're commenting on
    // closest() walks up the DOM and gets us the first parent matching the selector
    var $answer= $( this ).closest('.question-answer'),
        reply = $('textarea[name=comment-reply]', $answer).val();
    $('.sub-reply1, .sub-reply1-textarea, .sub-reply1-send', $answer).slideUp(250).remove();
    $("<div class='comment-sub-reply' style='display:none'>" + reply + "</div>").appendTo( $answer ).slideDown(250);
    subreply_visible = false;
});

请注意，当您在 sub-reply1 字段上调用 ​​remove() 时，实际上是从 DOM 中删除它们。如果您想在之后将它们放置在其他地方，则需要重新创建它们。您可能已经意识到这一点，但我只是指出这一点。

Answer 3

很难理解你在问什么，但你应该有这样的代码来创建你的 sub-reply1-send：

$(document).on('click','.reply',function(){
   $('.sub-reply1').remove(); // Remove any previous reply boxes first
   $(this).parent().after('<div class="sub-reply1" style=""><textarea class="sub-reply1-textarea" name="comment-reply" style=""></textarea><div class="sub-reply1-send" style=""></div></div>');
}

然后将评论放在同一个问题答案下：

$(document).on('click', '.sub-reply1-send', function() {
    var reply = $('textarea[name=comment-reply]').val();
    $(this).parent().after("<div class='comment-sub-reply' style='display:none'>" + reply + "</div>");
    $('.sub-reply1').slideUp(250).remove();
    $('.comment-sub-reply').slideDown(250);
    subreply_visible = false;
});

或者既然页面上应该只有1个子回复1，那就把它放在后面。

$(document).on('click', '.sub-reply1-send', function() {
    var reply = $('textarea[name=comment-reply]').val();
    $('.sub-reply1')
        .after("<div class='comment-sub-reply' style='display:none'>" + reply + "</div>")
        .slideUp(250)
        .remove();
    $('.comment-sub-reply').slideDown(250);
    subreply_visible = false;
});