我如何 prepend/append 这个 div 作为所有 children 的最后一个 child 而不是第一个？

Question

所以我有一个呈现 HTML 的视图，看起来像这样：

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

这是 create.js.erb 的样子：

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

我怎样才能达到我想要的？

编辑 1

糟糕，我对原来的问题不是很清楚。

我不能只使用 .append，因为存在当前位于 children 列表底部的表单域。

如果我确实使用追加，这就是修改后的 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}) %>");

我也有类似的行为。它在存在评论时有效，但在存在 none.

时不起作用

编辑 4

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

这是我添加一条评论时我的评论部分的样子，之前有 none（请注意间距已关闭，与其他 DOM 元素的对齐方式看起来很奇怪）：

那么当存在评论时它是这样的（注意对齐看起来有多奇怪）：

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

Answer 1

使用append() instead of prepend()方法。

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

---

更新 1：

既然你更新了问题，你不能用上面的代码来做。相反，您可以做的是获取 div 中的最后一个 social-comment 元素，然后将其附加到该元素之后。您可以使用 :last to get the last one and after() 方法追加到最后一个元素之后。

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

---

更新 2：

因为有嵌套的 div 和相同的 class 你只需要得到直接的 children 来代替。所以要么使用 child selector (>)

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

或使用children() and last().

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

---

此外，如果最后一个 div 的 class 始终采用 parent id 后跟 -new 的格式（例如：question-36 和 question-36-new) 那么你可以使用 before() 方法来完成。

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