Javascript 在最后一个子jQuery之前插入
我有一个页面,上面有帖子、评论和回复。帖子可以有很多评论,每条评论可以有很多回复——类似于Facebook的工作方式 我通过对每篇文章的ajax调用动态添加这些内容 在每个回复列表的末尾都有一个回复表单。我遇到的问题是,当一个新的回复被添加到一条评论中时,我无法在回复表单之前插入回复——这是li的最后一个孩子 这是我的js:Javascript 在最后一个子jQuery之前插入,javascript,jquery,Javascript,Jquery,我有一个页面,上面有帖子、评论和回复。帖子可以有很多评论,每条评论可以有很多回复——类似于Facebook的工作方式 我通过对每篇文章的ajax调用动态添加这些内容 在每个回复列表的末尾都有一个回复表单。我遇到的问题是,当一个新的回复被添加到一条评论中时,我无法在回复表单之前插入回复——这是li的最后一个孩子 这是我的js: var $div = $('.js-post-show'); function _addComment(comment) { var tplText = $('#
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>
法学博士
无名氏
评论这里。。。
回复
1.
法学博士
无名氏
回复这里。。。
回复
0
RS
罗勃·史密斯
另一答复
回复
0
提交你的答复
我已经尝试过insertBefore(),但是没有成功,任何建议都将不胜感激。您可以使用
insertAfter()
jquery函数:
此外,您还可以使用选择器中的:last
以最后一个回复为目标
$(replyHtml).insertAfter(“#js reply template li:last”);
您可以使用insertAfter()
jquery函数:
此外,您还可以使用选择器中的:last
以最后一个回复为目标
$(replyHtml).insertAfter(“#js reply template li:last”);
您尝试在最后一个LI之前插入的代码在哪里?您尝试在最后一个LI之前插入的代码可能重复?谢谢您的代码可能重复,但需要将新回复指定为由数据属性标识的特定注释。例如,数据注释id=“871”。这就是为什么我使用$div.find(“li[数据注释id=”“+commentId+”])好的,我认为您的代码应该是这样的$(replyHtml).insertAfter(“li[数据注释id=871]li:last”)
唯一的问题是,您需要将回复容器作为目标,然后在最后一次回复之后插入:)谢谢,但需要将新回复指定为由数据属性标识的特定注释。例如,数据注释id=“871”。这就是为什么我使用$div.find(“li[data comment id=”“+commentId+”])好吧,我认为您的代码应该是这样的$(replyHtml)。insertAfter(“li[data comment id=871]li:last”)
唯一的问题是,您需要以回复容器为目标,然后在最后一个回复之后插入:)