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/what-have-you-try /) 지금까지? 예쁜 그림 이외에 실제 HTML을 보여주기 위해 상처를 입지 않으므로 클래스를 설정했는지 알 수 있습니다. – nnnnnn

사실 그림을 사용하여 이해하기 쉽습니다. :) 지금도 HTML 코드를 편집하고 붙여 넣었습니다. – user456064

기능이 라인을 따라 뭔가해야한다 :

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

@ user456064 예, 동일한 이벤트 처리기를 가져 오기 위해 새로 추가 된 li 요소가 없기 때문에 가능합니다. 내 코드를 수정했습니다. –

내가 무엇을 놓치고 있는지 모르겠지만 지금은 자식 노드를 만들려고하면 동시에 하나의 부모 노드와 다른 자식 노드를 추가합니다 ... – user456064

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를 사용하여 목록에 자식 노드 추가하기

답변

관련 문제