JQuery Подготовить перед элементом

У меня есть структура html, подобная этой /

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

теперь я хочу добавить

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

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

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

Ответы

Ответ 1

Используйте before():

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

Ответ 2

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

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

или

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

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

Ответ 3

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

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

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

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

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

Вот скрипка

Ответ 4

Если вы строго хотите использовать .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>");

ИЛИ

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

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

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

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