jquery добавляет новый li в модель вложенного множества

Question

Каков наилучший способ вставить новый элемент li в определенную позицию модели вложенного множества?

Например, следующий список:

<ol class="nested">
    <li id="list_1"></li>
    <li id="list_2">
        <ol>
            <li id="list_3"></li>
            <li id="list_4"></li>
        </ol>
    </li>
    <li id="list_5"></li>
</ol>

Допустим, я хочу вставить новый li как потомок #list_2, я могу сделать так:

$('#list_'+parent_ID+' ol > li:last-child').after('<li id=""></li>');

Но не сработает, если родитель будет #list_1 или #list_4 Любые идеи!?

Answer 1

Есть много способов. Один может быть этим:

if ($('#list_'+parent_ID+' ol').length > 0) {
  $('#list_'+parent_ID+' ol > li:last-child').after('<li id=""></li>');
} else {
  $('#list_'+parent_ID).append('<ol><li id=""></li></ol>');
}

Вы можете проверить здесь.

Answer 2

Если я правильно понял, этот пример на jsfiddle может быть тем, что вы ищете?! Если там уже есть <ol> внутри родительского элемента, <li> добавлен Если родитель <li> пусто, новый <ol> создается до того, как к нему добавляется новый ребенок.

function appendItemToList(parentId) {
    var $thelist = $("#list_"+parentId),
        $ol = $thelist.find("> ol");

    if(!$ol.length) {
        $ol = $("<ol />").appendTo($thelist);
    }
    $ol.append("<li id=''></li>");
}

Answer 3

Вот пример добавления соответствующих элементов по клику:

$('ol.nested > li').bind('click', function(){
    var elem;
    if ($('ol', this).length > 0) {
        elem = $(this).find('ol');
    } else {
        elem = $('<ol>').appendTo($(this));
    }
    elem.append("<li>new</li>");
});

Answer 4

Используя плагин iff -

var parent_ID = 1;
$('#list_' + parent_ID).
    iff($(this).children('ol').length > 0)
    .append("<li>new</li>").end()
    .iff($(this).children('ol').length == 0)
    .append("<ol><li>new</li></ol>");

Демо - http://jsfiddle.net/MUcbW/2/

Answer 5

Вы можете сделать это в одной строке, например:

$('#list_' + parentId).contents().andSelf().filter('li').last().after('<li id=""></li>');

jsFiddle - http://jsfiddle.net/FloydPink/TSBKY/