jQuery Append order?

Question

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.

You show the code when you click .sub-reply1-send, and you are appending the comment under the same .question-answer. Shouldn't clicking on the .reply of #thead1 create a .sub-reply1 between #thread1 and #thread0? — Robert McKee, Jul 12 '13 at 06:31
I guess I am confused on what you are calling "comments". Are you referring to the question-answers, or the comment-sub-replys? As far as "Is there any way for me to make it so that it appends to the comment that it's clicked from?" please define what comment, and you clicked what? Because the code appears to append the comment to the .answers div. Is that not what you want? — Robert McKee, Jul 12 '13 at 06:39

Parv Sharma · Answer 1 · 2013-07-12T06:14:11.617

3

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

edited Jul 12 '13 at 06:14

answered Jun 15 '13 at 23:12

Parv Sharma

12,581
4
48
80

That doesn't work sadly, it messes with the sub-reply's position (new replies generate a text box underneath old replies), and it doesn't solve the issue when there are two main comments, the reply box still shows up in the bottom-most one. – anarian Jun 15 '13 at 23:15
1

well if you have problems please provide whole of your code. anybody answering here cannot know what th eproblems can be without looking at whole of your code. – Parv Sharma Jun 15 '13 at 23:22
with it what i wanted to be clear about is that .after can be used to put an element after any element its being called on.. so if $(this).after is not solving your problem then probably the element on which it is being call isnt correct.. can you provide the html – Parv Sharma Jun 15 '13 at 23:25
@user1850097 this answer has a valid point and clue on how to proceed based on the information you provided in your question. Without providing your markup it is going to be difficult for anyone to guess and provide you an accurate answer. and my +1 – PSL Jun 15 '13 at 23:28
`$(this).parent().children('.answer').append(...)` is probably going to be more reliable. – Dave Jun 15 '13 at 23:51
1

or maybe `.parents('.answer')`, or add a common class for anything which can hold comments. – Dave Jun 15 '13 at 23:55
yes currently there is no combined container for the questions and the answers – Parv Sharma Jun 15 '13 at 23:59

score 0 · Answer 2 · answered Jun 15 '13 at 23:47

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.

Robert McKee · Answer 3 · 2013-07-12T06:52:31.863

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

jQuery Append order?

3 Answers3

Linked