使用Jquery將子節點添加到列表

-2

我有一些預定義順序的數據的有序列表（ol）。當點擊一個按鈕時，我需要添加一個新的子節點到列表中。該圖像顯示列表數據： enter image description here 使用Jquery將子節點添加到列表

例如，當我單擊列表3上的「添加」按鈕時，它應該創建並向父節點添加一個新的子節點「列表3.3」。但是，如果我點擊List 4「Add」按鈕，它應該創建一個新的子節點「List 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做到這一點？

來源

2013-04-26 user456064

[你嘗試過什麼（http://mattgemmell.com/ 2008/12/08 /你曾試過/）到目前爲止？除了漂亮的圖片之外，顯示實際的html也不會有什麼壞處，所以我們可以看看你是否已經設置了類，或者... – nnnnnn 2013-04-26 05:06:04

其實我認爲它會很容易理解使用圖片。 :) 現在編輯和粘貼的HTML代碼太.. – user456064 2013-04-26 05:29:10

的功能應該是沿着這些路線的東西：

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);

來源

2013-04-26 05:36:34

我試過的代碼，但它只創建一個子節點，也不讓我在新創建的節點創建更多的節點。它不適用於已有子節點的節點。 – user456064 2013-04-26 06:04:13

@ user456064是的，因爲我沒有新添加的li元素來獲取相同的事件處理函數。修改我的代碼。 – 2013-04-26 06:07:05

我不知道什麼是丟失，但現在當我嘗試創建子節點，它同時添加一個父節點和另一個子節點... – user456064 2013-04-26 06:20:48

JS FIDDLE LINK

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

JQUERY

$(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-26 06:30:55 rahularyansharma

使用Jquery將子節點添加到列表

回答

相關問題