在jquery中追加到无序列表(ul）

append to unordered list (ul) in jquery

本文关键字：列表 ul 无序 jquery 追加      更新时间：2023-09-26
<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> 


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

这将在id为"int2"的元素的父元素之后插入新元素。看到它在这里工作。

您需要使用parent，因为否则新元素将插入与给定id的input相同的li元素中(尽管您的问题标题(现在曾(具有误导性。。。在您的示例中，您希望将新元素添加为新的li，但您的标题显示"append to li"。(

jquery中的选择器功能强大 
 $("#list > li:eq(2)").after('<li><input name="int[]" type="checkbox" value="55" id="int55" />int55</li>');

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

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

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

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

.eq()和.after()的组合就足够了。外观：(

相关文章：