jQuery Prepend перед элементом

Question

У меня есть такая HTML-структура /

<li id="1"></li>
<li id="2"></li>
<li id="3"></li>
<li id="comment-box"></li>

Теперь я хочу подготовить

<li id="4"></li>

перед комментарием.

Я отправляю форму из поля для комментариев, и когда она будет успешной, я хочу подготовиться

Answer 1

Использовать перед () :

$('#comment-box').before('<li id="4"></li>')

Answer 2

Разве это не имеет больше смысла?:

$('ul#comments_container').prepend('<li id="4"></li>');

или

$('<li id="4"></li>').hide().prependTo('Ul#comments_container').slideDown("slow");

Это позволит вам добавить его в начало списка ul, чтобы поместить его вконец списка, просто используйте «append» вместо «prepend», или «appendTo» также работает.

Answer 3

Если вы строго хотите использовать .prepend (), вам поможет следующее:

// this gives you a list with all matching elements
var elementsList = $("li");  

// this refers to an element at required index and wraps it into a jQuery object           
var elementAtIndex = $(elementsList[your index]);   

// and finally apply change
elementAtIndex.prepend("<li id=\"4\"></li>");

OR

То же самое, используя .eq (), который будет более элегантным после того, как вы поймете основную идею. .eq позволяет ссылаться на определенный индекс.

 var elementAtIndex= $("li").eq(your index);  
 elementAtIndex.prepend("<li id=\"4\"></li>");

И наконец мы подошли к финальному короткому варианту:

 $("li").eq(index).prepend("<li id=\"4\"></li>"); 

Answer 4

Нередко иметь последовательный идентификатор, прикрепленный к элементам, но вероятным случаем будет вставка по определенному индексу с неизвестной длиной совпадающих элементов.

Если вы знаете, сколько элементов в списке, то вы можете использовать nth-child или: eq для прямого доступа к элементу без необходимости связывать имена классов или идентификаторов разметки с селектором jQuery.

$('li:nth-child(3)') выбирает третье <li>, в то время как $('li:eq(3)') выбирает четвертое, потому что: eq основано на нуле.

В вашем случае мои предпочтения будут следующие

$('li:last').prepend('<li>Fourth item</li>');

Вот скрипка