jQuery insertAt

Question

我正在尝试使用jQuery将li元素插入到ul元素的特定索引中.我似乎只能在列表的末尾插入一个元素.我是jQuery的新手,所以我可能没有正确思考.

Answer 1

尝试这样的事情:

$("#thelist li").eq(3).after("<li>A new item</li>");

使用该eq函数,您可以获取检索到的元素的特定索引...然后,在其后插入新的列表项.

在上面的函数中,我在位置4(索引3)插入一个新项目.

有关jQuery Docs功能的更多信息

Answer 2

一个简单的jQuery插件(一个小测试套件),允许在包括0的任何索引处添加项目.

$.fn.insertAt = function(index, $parent) {
    return this.each(function() {
        if (index === 0) {
            $parent.prepend(this);
        } else {
            $parent.children().eq(index - 1).after(this);
        }
    });
}

假设我们有以下HTML:

<ul id="items">
    <li>A</li>
</ul>

然后在索引0处插入项目$('<li>C</li>').insertAt(0, $('#items'))将导致

<ul id="items">
    <li>C</li>
    <li>A</li>
</ul>

插入另一个项目,这一次在指数1 $('<li>B</li>').insertAt(1, $('#items'))产量

<ul id="items">
    <li>C</li>
    <li>B</li>
    <li>A</li>
</ul>

免责声明:输入参数没有错误处理.如果index是负数或大于子项的长度,或者如果index不是数字,则行为或多或少未定义.如果$parent不是jQuery对象insertAt将失败.

Answer 3

与Dreas的答案类似,但略有不同,可能更有效:

$("#thelist li:eq(2)").after("<li>new item</li>");

或者另一种方式:

$("<li>new item</li>").insertAfter("#thelist li:eq(2)");