jQuery를 사용하여 트리 뷰의 HTML 구조

Question

트리 뷰에 HTML 구조를 표시해야합니다. 일부 jQuery 트리 뷰 플러그인을 발견했지만 일반적으로 목록이 필요합니다.

(노드가 다른 태그뿐만 아니라 'DIV'을 가질 수 있음)의 간단한 HTML을 보자 :

<div id="node1"> 
    <div id="node2"> 
     <div id="node3"></div> 
     <div id="node4"></div> 
    </div> 
<div> 

을 나는이처럼 표시 할 :

노드 1

• 노드 2
  • node3
  • node4

  <ul> 
      <li>node1 
       <ul> 
        <li>node2 
         <ul> 
          <li>node3</li> 
          <li>node4</li> 
         </ul> 
        </li> 
       </ul> 
      </li> 
  </ul> 
  

  어떻게 : treeview

  그래서 나는 다음과 같이 정렬되지 않은 목록에 HTML을 변환 할 필요가 : 지금은

, 나는이 jQuery 플러그인을 사용하고 있습니다 jQuery를 사용하여이 작업을 수행 할 수 있습니까? 다른 접근 방식이 더 좋을 것이라고 생각되면 알려주십시오.

Answer 1

여기 가세요. 재미있었습니다. Demo - div 태그와 관련이 없도록 업데이트되어 html 문자열로 바뀔 수있는 요소를 반환합니다.

$.fn.convertToUL = function(isTop) { 
    if(isTop==null) isTop=true; 
    var ul=$("<ul>"); 
    var li=$("<li>"); 
    li.append($(this).attr("id")); 
    var children=0; 
    $(this).children().each(function(){ 
     ul.append($(this).convertToUL(false)); 
     children++; 
    }); 
    if(children>0) 
     li.append(ul); 
    if(li.is(':empty')) 
     return ""; 
    if(isTop) 
     return $("<ul>").append(li); 
    return li; 
} 

//to get text of elements use .wrap('<div/>').parent().html() 
var ulElement=$("#node1").convertToUL(); 
alert(ulElement.wrap('<div/>').parent().html()); 
$("#node1").replaceWith(ulElement);