追加到jQuery中的无序列表（ul）答案

【问题标题】：append to unordered list (ul) in jquery追加到jQuery中的无序列表（ul）
【发布时间】：2011-10-07 16:20:06
【问题描述】：

<ul id="list">
<li><input name="int[]" type="checkbox" value="1" id="int1" />int1</li>
<li><input name="int[]" type="checkbox" value="2" id="int2" />int2</li>
<li><input name="int[]" type="checkbox" value="3" id="int3" />int3</li>
<li><input name="int[]" type="checkbox" value="4" id="int4" />int4</li>
</ul>

这个

$("#list").append('<li><input name="int[]" type="checkbox" value="55" id="int55" />int55</li>');

制作：

<ul id="list">
<li><input name="int[]" type="checkbox" value="1" id="int1" />int1</li>
<li><input name="int[]" type="checkbox" value="2" id="int2" />int2</li>
<li><input name="int[]" type="checkbox" value="3" id="int3" />int3</li>
<li><input name="int[]" type="checkbox" value="4" id="int4" />int4</li>
<li><input name="int[]" type="checkbox" value="55" id="int55" />int55</li>
</ul>

例如我该怎么做

<ul id="list">
<li><input name="int[]" type="checkbox" value="1" id="int1" />int1</li>
<li><input name="int[]" type="checkbox" value="2" id="int2" />int2</li>
<li><input name="int[]" type="checkbox" value="55" id="int55" />int55</li>
<li><input name="int[]" type="checkbox" value="3" id="int3" />int3</li>
<li><input name="int[]" type="checkbox" value="4" id="int4" />int4</li>
</ul>

或

<ul id="list">
<li><input name="int[]" type="checkbox" value="1" id="int1" />int1</li>
<li><input name="int[]" type="checkbox" value="2" id="int2" />int2</li>
<li><input name="int[]" type="checkbox" value="3" id="int3" />int3</li>
<li><input name="int[]" type="checkbox" value="55" id="int55" />int55</li>
<li><input name="int[]" type="checkbox" value="4" id="int4" />int4</li>
</ul>

?

【问题讨论】：

所以你想插入一个<ul> 的孩子，不是在最后，而是在中间的某个地方？这是你的问题吗？

标签： javascript jquery html css append

【解决方案1】：

$("#int2").parent().after('<li><input name="int[]" type="checkbox" value="55" id="int55" />int55</li>');

这会在带有id“int2”的元素的父元素之后插入新元素。看到它工作here。

您需要使用parent，否则新元素将插入到与input 相同的li 元素中，并带有给定的id（尽管您的问题标题是（现在是 em>) 误导...在您的示例中，您希望将新元素添加为新的 li，但您的标题显示“附加到 li”。）

【讨论】：

【解决方案2】：

jquery 中的选择器真的很强大

 $("#list > li:eq(2)").after('<li><input name="int[]" type="checkbox" value="55" id="int55" />int55</li>');

【讨论】：

【解决方案3】：

.eq() 和 .after() 的组合就足够了。 Look :)

【讨论】：

【解决方案4】：

如果我理解你的问题，你会想做这样的事情：

var pos = 2; // Will insert before the second <li>
$('#list :nth-child(' + pos + ')').before('<li>NEW</li>');

【讨论】：

【解决方案5】：

您可以使用after() 方法。例如。

$('li').eq(2).after('...')

【讨论】：