Как добавить/добавить этот div как последний ребенок всех детей, а не первый?

Question

Поэтому у меня есть мнение, что есть делает HTML, который выглядит следующим образом:

Что происходит сейчас, когда пользователь добавляет новый комментарий, он будет добавлен в верхней части этого списка, т.е. div.social-comment, который подсвечивается. Однако я хочу, чтобы он был добавлен после последнего в списке, а не как первый. Как мне это сделать?

Это то, что create.js.erb выглядит следующим образом:

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

Как я могу добиться того, чего я хочу?

Edit 1

Мой плохо, я не совсем понятно с оригинальным вопросом.

Я не могу просто использовать .append, из-за наличия поля формы, которое в настоящее время находится в нижней части этого списка детей.

Если я использовать Append, это то, что модифицированный HTML выглядит следующим образом:

Обратите внимание на .row .question-46-new появляется перед последним .social-comment.

Так что в конечном итоге производить это:

Что, очевидно, что я не хочу.

Я хочу, чтобы новый комментарий отображался прямо над текстовым полем Write Comment и в конце списка существующих комментариев.

Edit 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}) %>"); 

И я получаю подобное поведение. Он работает, когда есть существующие комментарии, но не работает, когда их нет.

Edit 4

Когда я использую :before предложение от Pranav, это результат.

Это то, что мой комментарий раздел выглядит, когда я добавить один комментарий, когда раньше не было (обратите внимание на расстояние выключен и согласование с другими элементами DOM выглядит странно):

Тогда это то, что он выглядит, когда есть существующий комментарий (обратите внимание, как странно выглядит расклад):

Но если я обновить, это то, что он выглядит Лик е (который, как она должна выглядеть, но только не так, как он выглядит сразу после того, как комментарий добавляется):

Answer 1

Использование append() вместо prepend() метода.

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

---

UPDATE 1:

Поскольку вы обновили вопрос, вы не можете сделать это с помощью выше кода. Вместо этого вы можете получить последний элемент social-comment внутри div и затем добавить его после элемента. Вы можете использовать :last, чтобы получить последний, и after() метод добавления после последнего элемента.

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

---

UPDATE 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}) %>");