JQuery insertAt

Ответ 1

Попробуйте что-то вроде этого:

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

С помощью функции eq вы можете получить определенный индекс извлекаемых элементов... затем вставьте новый элемент списка после него.

В приведенной выше функции я вставляю новый элемент в позицию 4 (индекс 3).

Подробнее о функции в jQuery Docs

Ответ 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 не является числом, поведение более или менее undefined. Если $parent не является объектом jQuery, то insertAt завершится с ошибкой.

Ответ 3

Подобно Dreas, но немного отличается и, возможно, более эффективен:

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

Или другим способом:

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

Ответ 4

Попробуйте использовать этот метод.. это самый простой способ вставить текст внутри элемента.

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

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