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

【问题标题】：How to add a list-item at specific position如何在特定位置添加列表项
【发布时间】：2011-02-25 07:22:01
【问题描述】：

我想在特定位置添加<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>Position 2</li> 内附加了<li>，而是在<li>Position 2</li> 下方/之后添加<li>。

谁能帮帮我？

谢谢。

【问题讨论】：

【解决方案1】：

你必须使用after() 而不是append()：

说明：在匹配元素集中的每个元素之后插入由参数指定的内容。

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

append() 的文档清楚地写着：

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

为了完整性：

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

【讨论】：

【解决方案2】：

【讨论】：

【解决方案3】：

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

索引从 1 开始

【讨论】：

【解决方案4】：

查看insertAfterhere

【讨论】：