如何在特定位置添加列表项

Question

我想在特定位置添加一个<li>，例如：

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

假设我想在<li>Position 2</li>下面/后面添加一个新的<li>，我应该如何使用jQuery实现呢？

我尝试使用以下代码：

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

但是，它并没有起作用，因为它将<li>附加在<li>位置2</li>内部，而不是在<li>位置2</li>下方/后面添加<li>。

有人能给我一些帮助吗？

谢谢。

- Germanico Brismal

Answer 1

你需要使用after()而不是append():

描述：将由参数指定的内容插入到匹配元素集合中每个元素之后。

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

---

append() 的文档明确说明：

将内容插入到每个元素的末尾。

---

为了完整起见：

请注意，:eq(n) 匹配匹配元素集合中的第 n 个元素，而:nth-child(n)匹配父元素的第 n 个子元素。

- Felix Kling

Answer 2

你应该使用after()或insertAfter()函数。
http://api.jquery.com/category/manipulation/dom-insertion-outside/

- emmanuel

Answer 3

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

索引从1开始

- jay

Answer 4

请检查 insertAfter 这里

- Teja Kantamneni