jQuery insertAt

Question

Я пытаюсь вставить элемент li в определенный индекс элемента ul, используя jQuery. Я, кажется, только могу вставить элемент в конец списка. Я очень новичок в 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

Аналогично ответу Дреаса, но немного другой и, возможно, более эффективный:

$("#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();