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插件（a small test suite），允许在包括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)");

Answer 4

尝试使用此方法..这是在元素中插入文本的最简单方法..

<div id="test"></div>

$('#test').append();