jQuery предпослать перед элементом
У меня есть html-структура, подобная этой/
<li id="1"></li>
<li id="2"></li>
<li id="3"></li>
<li id="comment-box"></li>
Теперь я хочу добавить
<li id="4"></li>
Перед полем комментариев.
Я отправляю форму из окна комментариев, и как только она будет успешной, я хочу сделать предисловие.
4 ответа:
Использовать до():
$('#comment-box').before('<li id="4"></li>')
Разве это не имело бы больше смысла?:
$('ul#comments_container').prepend('<li id="4"></li>');
Или
$('<li id="4"></li>').hide().prependTo('Ul#comments_container').slideDown("slow");
Это позволит вам добавить его в начало списка ul, чтобы поместить его в конец списка, просто используйте "добавить", а не "добавить" или "добавить" также работает.
Обычно последовательный идентификатор присоединяется к элементам, но вероятным случаем будет вставка в определенный индекс неизвестной длины совпадающих элементов.
Если вы знаете, сколько элементов в списке, то вы можете использовать nth-child или :eq для прямого доступа к элементу без необходимости связывать имена классов разметки или идентификаторы в селектор jQuery.
$('li:nth-child(3)')
выбирает третий<li>
, а$('li:eq(3)')
выбирает четвертый, потому что :eq основан на нуле.В вашем случае мой предпочтение было бы следующим
$('li:last').prepend('<li>Fourth item</li>');
Если вы строго хотите использовать .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>");