Как добавить элемент списка в определенную позицию

Я хотел бы добавить <li> в определенную позицию, например:

<ul id="list">
    <li>Position 1</li>
    <li>Position 2</li>
    <li>Position 4</li>
<ul>

Допустим, я хочу добавить новый <li> ниже/после <li>Position 2</li>, как мне это сделать с помощью jQuery?

Я попытался сделать это, используя приведенный ниже код:

$('#list li:eq(1)').append('<li>Position 3</li>');

Но это не сработало, потому что он добавляет <li> внутри <li>Position 2</li>, вместо этого добавляет <li> ниже/после <li>Position 2</li>.

Может ли кто-нибудь помочь мне?

Спасибо.


jquery append listitem
person Germanico Brismal    schedule 28.05.2010    source источник

Ответы (4)


arrow_upward
81
arrow_downward

Вы должны использовать after() вместо append():

Описание: вставить содержимое, указанное в параметре, после каждого элемента в наборе совпадающих элементов.

$('#list li:eq(1)').after('<li>Position 3</li>');

В документации append() четко сказано:

Вставьте содержимое (...) в конец каждого элемента.

Для полноты:

Обратите внимание, что :eq(n) соответствует n элементу соответствующего набора элементов, тогда как :nth-child(n) соответствует nth ребенок родителя.

person Felix Kling    schedule 28.05.2010

arrow_upward
8
arrow_downward

Вы должны использовать after() или insertAfter()
http://api.jquery.com/category/manipulation/dom-insertion-outside/

person emmanuel    schedule 28.05.2010

arrow_upward
3
arrow_downward 

$('<option val="position3">Position3</option>').insertAfter('#list :nth-child(<give childnumber here>)')

индекс начинается с 1

person jay    schedule 09.08.2012

arrow_upward
1
arrow_downward

Проверьте insertAfter здесь

person Teja Kantamneni    schedule 28.05.2010