我如何将这个div作为所有孩子的最后一个孩子而不是第一个孩子进行前置/附加？

Question

所以我有一个视图，它呈现了如下所示的HTML：

现在发生的事情是当用户添加新评论时，它现在被添加到该列表的顶部，即突出显示的div.social-comment。但是，我希望它在列表中的最后一个之后添加，而不是第一个。我该怎么做？

这就是create.js.erb的样子：

$(".question-<%= @comment.commentable.id %>").prepend("<%= j (render partial: 'comments/comment', locals: { comment: @comment}) %>");

我如何实现我的目标？

修改1

我的不好，我对原来的问题并不完全清楚。

我不能只使用.append，因为目前位于该子列表底部的表单字段已存在。

如果我使用append，这就是修改过的HTML的样子：

请注意.row .question-46-new出现在最后.social-comment之前。

所以最终会产生这个：

这显然是我不想要的。

我想要的是新评论显示在Write Comment文本框的正上方，以及现有评论列表的末尾。

修改2

这是我的DOM树在尝试Pranav的建议后的样子：

编辑3

在Pranav的最新尝试之后，结果就是这些。

我试过了：

$(".question-<%= @comment.commentable.id %>").children(".social-comment").last().after("<%= j (render partial: 'comments/comment', locals: { comment: @comment}) %>");

当有现有评论时，这种方法很有效，它只是将其添加到最后一条评论中。当没有现有评论时，新评论就会消失。

这是没有评论时DOM树的图片：

以下是添加评论后DOM树的图片，使用上面的.js.erb：

没有变化。对于它的价值，我也尝试了另一个建议：

$(".question-<%= @comment.commentable.id %> > .social-comment:last").after("<%= j (render partial: 'comments/comment', locals: { comment: @comment}) %>");

我得到了类似的行为。它在有现有注释时有效，但在没有注释时无效。

编辑4

当我使用Pranav的:before建议时，结果就是这样。

当我添加一个注释时，这是我的评论部分，当之前没有注释时（注意间距是关闭的，并且与其他DOM元素的对齐看起来很奇怪）：

然后这就是现有注释时的样子（注意对齐看起来有多奇怪）：

但如果我刷新，这就是它的外观（它应该是什么样子，但不是在添加评论后它的外观）：

Answer 1

使用 append() 代替 prepend() 方法。

$(".question-<%= @comment.commentable.id %>").append("<%= j (render partial: 'comments/comment', locals: { comment: @comment}) %>");

<小时/> 更新1：

由于您更新了问题，因此无法使用上述代码进行更新。相反，你可以做的是获取div中的最后一个social-comment元素，然后将它追加到元素之后。您可以使用 :last 获取最后一个，并使用 after() 方法追加到最后一个元素之后。

$(".question-<%= @comment.commentable.id %> .social-comment:last").after("<%= j (render partial: 'comments/comment', locals: { comment: @comment}) %>");

更新2：

由于嵌套div具有相同的类，因此您只需要获得直接子项。所以要么使用child selector (>)

$(".question-<%= @comment.commentable.id %> > .social-comment:last").after("<%= j (render partial: 'comments/comment', locals: { comment: @comment}) %>");

或使用 children() 和last()。

$(".question-<%= @comment.commentable.id %>").children(".social-comment").last().after("<%= j (render partial: 'comments/comment', locals: { comment: @comment}) %>");

此外，如果最后一个div的类总是采用parent id后跟-new格式（例如：question-36和question-36-new），那么你可以做到使用 before() 方法。

$(".question-<%= @comment.commentable.id %>-new").before("<%= j (render partial: 'comments/comment', locals: { comment: @comment}) %>");