-2

事前定義された順序で並べられたデータの順序付きリスト (ol) があります。ボタンがクリックされたときに、新しい子ノードをリストに追加する必要があります。画像はリストデータを示しています:ここに画像の説明を入力

たとえば、リスト 3 の [追加] ボタンをクリックすると、新しい子ノード「リスト 3.3」が作成され、親ノードに追加されます。しかし、リスト 4 の「追加」ボタンをクリックすると、新しい子ノード「リスト 4.1」が作成されます。HTML コードは次のとおりです。

<div class="dd" id="tree">
    <ol class="list-tree dd3-list">
        <li class="item-tree item-tree-inner" data-id="136"></li> 
        <li class="item-tree item-tree-inner" data-id="137"></li>
        <li class="item-tree item-tree-inner" data-id="135">
            <ol class="list-tree dd3-list">
                <li class="item-tree item-tree-inner" data-id="138"></li>
                <li class="item-tree item-tree-inner" data-id="86"></li>
            </ol>
        </li>
        <li class="item-tree item-tree-inner" data-id="1"></li>
    </ol>
</div>

jQueryを使用してこれを達成するにはどうすればよいですか?

4

2 に答える 2

1

JSフィドルリンク 

  <ol>
        <li>list1 <input type="button" value="add"/></li>
        <li>list2 <input type="button" value="add"/></li>
        <li>list3 <input type="button" value="add"/></li>
        <li>list4 <input type="button" value="add"/></li>
        <li>list5 <input type="button" value="add"/></li>
    </ol>

Jクエリ

 $(document).ready(function () {

  $('body').on('click', 'ol li input', function(){
        $(this).parent().append('<ol><li>child node<input type="button" value="add" /></li></ol>');
    });
});
于 2013-04-26T06:30:55.697 に答える