是否有使用jQuery插入 <li> 到一个中间 <ol> ？

Question

我知道我可以使用append（）将'li'添加到列表的末尾，但是如何将其添加到特定索引？ 我是否只需要操作一个数组，然后使用更新后的数组刷新列表？ 还是已经有用jQuery编写的函数允许我执行此操作？

我曾尝试查看jQuery API文档，但本周早些时候才开始使用JavaScript，但我在理解所有内容时遇到了麻烦。

Answer 1

结合使用nth-child()和after

$( ".todos li:nth-child(2)" ).after(todoLi);

如果要在列表的第二项之后插入todoLi。

Answer 2

这是一个简短的片段，向您展示.after（）的工作方式。

 $('ul li:eq(1)').after("<li>hello world</li>") 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> 

Answer 3

您可以这样尝试，其中index是您要插入的位置。

var index = 3;
$('ul li:nth-of-type('+index+')').after('<li><a href="/link">Zac was here</a></li>')

Answer 4

$('ol li').eq(index).after(your_element);

Answer 5

只要找出哪个元素在中间， insertAfter它insertAfter 。

var newLi = $('<li></li')
var halfway = Math.floor($('ol > li').length);
newLi.insertAfter($('ol > li')[halfway]);

Answer 6

您可以尝试使用：nth-​​child（）选择器来使用jQuery .after（）方法。 例如，如果您想尝试在第二个li之后和第3个li之前添加您的li

$( "ul li:nth-child(2)" ).after('<li>added!</li>');

Answer 7

jQuery有一个函数之后或一个节点之前添加元素（ .before() / .after()

然后，您可以使用.eq()选择一个元素并将您的元素放置在所需的位置。

这是一个可以执行您想要的功能的小功能（基于0的索引）。 检查索引元素是否存在很重要，否则它将永远不会放入DOM中：

function appendAt($what, $to, index){
    var $target = $to.children().eq(Math.max(0, index));
    if($target.length !== 0){
        $target.before($what);
    }else{
        $what.appendTo($to);
    }
}

//Use it like that
appendAt($('<li>'), $('.todos'), 5); //The li with become the 6th element.

Answer 8

<ol class="list">
    <li><a href="#">list 1</a></li>
    <li class="active"><a href="#">list 2</a></li>
    <li><a href="#">New Tag</a></li>
    <li><a href="#">list 3</a></li>
    <li><a href="#">list 4</a></li>
</ol>

$('li.active').after('<li><a href="#">New Tag</a></li>');

Answer 9

简单的方法是

var newLi="<li>This is test</li>";
$(".list li:nth-child(2)").after(newLi);

请记住，子索引从1开始，所以这里的2表示第二个li之后