jQuery Append order? | 易学教程

问题

I'm creating a series of comments, with replies to the comments below them. I use this code to append the new reply underneath the comment.

$(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;
});

This works fine if there's only one comment to reply to, but if there's two comments, let's say Comment1 and Comment2, Comment1 will be generated underneath Comment2. Replying to Comment1 will work fine, but replying to Comment2 would generate the reply-box underneath the last one in Comment1.

Is there any way for me to make it so that it appends to the comment that it's clicked from?

EDIT: HTML markup generated from what I have.

<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>

The other aspects of the JQuery don't affect it, only this one function creates sub-comments. So far, the unique thread IDs don't do anything, but I'm trying to make that work to seperate the comments.

回答1:

use jquery .after(). using this you can add a new element after the one you provide for the .after() function.

so probably doing $('.answer').append() you should be doing $(this).after(). Here this will point to the element been clicked

回答2:

You can try something like:

$(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;
});

Note that when you're calling remove() on the sub-reply1 fields, you're actually deleting them from the DOM. If you want to place them somewhere else afterwards, you will need to recreate them. You might already be aware of this, but I'm just pointing it out.

回答3:

It's hard to understand what you are asking, but you should have code that looks like this to create your 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>');
}

Then to place the comment under the same question-answer:

$(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;
});

or since there should only be 1 sub-reply1 on the page, just put it after that.

$(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;
});

来源：https://stackoverflow.com/questions/17128759/jquery-append-order

标签

jquery

dom

append