jQuery TreeView中的HTML結構

Question

我需要在樹視圖中顯示HTML結構。我發現了一些jQuery treeview插件，但他們通常需要一個列表。

讓我們來簡單的HTML（節點可能有不同的標籤，不僅 '格'）：

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

我想是這樣顯示的：

節點1

• 節點2
  • node3
  • node4

現在，我使用這個jQuery插件：treeview

所以我需要將HTML轉換成無序列表如下：

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

如何我可以使用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);