javascript - 在最后一个 child 之前插入 jQuery

Question

我有一个包含帖子、评论和回复的页面。帖子可以有很多评论，每条评论可以有很多回复 - 类似于 Facebook 的工作方式。

我通过对每个帖子的 ajax 调用动态添加这些内容。

在每个回复列表的末尾都有一个回复表单。我遇到的问题是当新回复添加到评论时，我无法在回复表单之前插入回复 - 这是 li 的最后一个 child 。

这是我的js:

var $div = $('.js-post-show');

function _addComment(comment) {
    var tplText = $('#js-comment-template').html();
    var tpl = _.template(tplText);
    var html = tpl(comment);

    $div.find('.js-comment-list')
        .append($.parseHTML(html));
}

function _addReply(reply, commentId) {
    var tplText = $('#js-reply-template').html();
    var tpl = _.template(tplText);
    var html = tpl(reply);

    $div.find("li[data-comment-id='" + commentId + "']")
        .append($.parseHTML(html));
}

function _loadReplyForm(comment) {
    var tplText = $('#js-reply-form-template').html();
    var tpl = _.template(tplText);
    var html = tpl(comment);

    $div.find("li[data-comment-id='" + comment.id + "']")
        .append($.parseHTML(html));
}

这是我的 HTML:

<li class="list-group-item py-4 comment-list" data-comment-id="871">
<div class="media">
    <div class="avatar avatar-sm">JD</div>
    <div class="media-body">
        <div class="mb-2">
            <span class="h6 mb-0">John Doe</span>
        </div>
        <p>
            Comment here...
        </p>
        <div class="d-flex align-items-center">
            <div class="mr-2">
                <button class="btn btn-sm btn-outline-primary" data-target="#create-reply-871" data-toggle="collapse" aria-expanded="true" aria-controls="create-reply-871">Reply</button>

                <button class="btn btn-sm btn-outline-primary js-like-comment" data-url="/api/comments/871/toggle-comment-like" data-is-liked="1">
                    <span class="fas fa-thumbs-up"></span>
                    <span class="js-like-comment-count">1</span>
                </button>
            </div>
        </div>
    </div>
</div>

<div class="media">
    <div class="avatar avatar-sm">JD</div>
    <div class="media-body">
        <div class="mb-2">
            <span class="h6 mb-0">Jane Doe</span>
        </div>
        <p>
            Reply here...
        </p>
        <div class="d-flex align-items-center">
            <div class="mr-2">
                <button class="btn btn-sm btn-outline-primary" data-target="#create-reply-24" data-toggle="collapse" aria-expanded="false" aria-controls="create-reply-24">Reply</button>

                <button class="btn btn-sm btn-outline-primary js-like-reply" data-url="/api/replies/24/toggle-reply-like" data-is-liked="0">
                    <span class="far fa-thumbs-up"></span>
                    <span class="js-like-reply-count">0</span>
                </button>
            </div>
        </div>
    </div>
</div>

<div class="media">
    <div class="avatar avatar-sm">RS</div>
    <div class="media-body">
        <div class="mb-2">
            <span class="h6 mb-0">Rob Smith</span>
        </div>
        <p>
            Another reply
        </p>
        <div class="d-flex align-items-center">
            <div class="mr-2">
                <button class="btn btn-sm btn-outline-primary" data-target="#create-reply-25" data-toggle="collapse" aria-expanded="false" aria-controls="create-reply-25">Reply</button>

                <button class="btn btn-sm btn-outline-primary js-like-reply" data-url="/api/replies/25/toggle-reply-like" data-is-liked="0">
                    <span class="far fa-thumbs-up"></span>
                    <span class="js-like-reply-count">0</span>
                </button>
            </div>
        </div>
    </div>
</div>

<div class="media js-create-reply collapse show" id="create-reply-871" style="">
    <div class="media-body">
        <form method="post" class="card-body js-create-reply-form needs-validation" novalidate="novalidate" data-url="/api/replies/871">
            <div class="form-group"><textarea id="reply" name="reply" required="required" class="from-control-lg js-create-reply-textarea form-control" rows="4" placeholder="Type your reply here"></textarea></div>
            <div class="d-flex align-items-center">
                <button type="submit" class="btn btn-success mr-3 js-create-reply-button">Submit your reply</button>
                <a href="#create-reply" class="text-small text-muted" data-toggle="collapse" data-target="#create-reply-871" aria-expanded="true" aria-controls="create-reply-871">Cancel</a>
            </div>
        </form>
    </div>
</div>
</li>

我试过 insertBefore() 但没有成功，任何建议将不胜感激。

Answer 1

您可以使用 insertAfter() jquery 函数:http://api.jquery.com/insertafter/你也可以在你的选择器中使用 :last 来定位最后的回复，比如

$(replyHtml).insertAfter("#js-reply-template li:last");