追加到 jquery 中的无序列表 (ul)

Question

<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> 

？

Answer 1

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

这会将新元素插入到 id“int2”的元素的父元素之后。 此处查看其工作情况。

您需要使用 parent，否则新元素将被插入到与具有给定 id< 的 input 相同的 li 元素中/code> （尽管您的问题标题（现在曾经）具有误导性......在您的示例中，您希望将新元素添加为新的li，但您的标题说“附加到li”。）

Answer 2

jquery中的选择器真的很强大

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

Answer 3

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

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

Answer 4

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

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

Answer 5

.eq() 和 .after() 就足够了。 看看 :)