javascript - 使用 Jquery 将子节点添加到列表

Question

我有一个按预定义顺序排列的数据列表（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 来做到这一点？

Answer 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>

查询

 $(document).ready(function () {

  $('body').on('click', 'ol li input', function(){
        $(this).parent().append('<ol><li>child node<input type="button" value="add" /></li></ol>');
    });
});

Answer 2

该功能应该是这样的：

var handleAdd = function (event) {
    var $this = $(this);
    if ($this.children('ol').length > 0) {
        $('<li></li>').appendTo($this.children('ol'));
    } else {
        $('<ol><li></li></ol>').appendTo($this);
    }
    event.stopPropagation();
};
$(document).on('click', 'li', handleAdd);