3

新しい 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>

#list_2 の子として新しい li を挿入したいとしましょう。次のように実行できます。

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

しかし、親が #list_1 または #list_4 になる場合は機能しません。

4

5 に答える 5

1

クリック時に適切な要素を追加する例を次に示します。

$('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>");
});
于 2011-10-03T21:59:00.923 に答える
1

私が正しく理解していれば、この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>");
}
于 2011-10-03T21:57:08.963 に答える
1

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/

于 2011-10-03T21:57:36.563 に答える
0

多くの方法があります。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>');
}

ここでテストできます。

于 2011-10-03T21:47:29.870 に答える
0

次のような 1 行でこれを行うことができます。

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

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

于 2011-10-03T21:54:27.633 に答える