jQuery TreeView中的HTML结构

2013-02-27 92 views 2 likes

我需要在树视图中显示HTML结构。我发现了一些jQuery treeview插件，但他们通常需要一个列表。jQuery TreeView中的HTML结构

让我们来简单的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来做到这一点吗？如果您认为不同的方法会更好，请让我知道。

来源

2013-02-27 Victor

你不能在源代码编辑器中进行字符串替换吗？ – Blazemonger 2013-02-27 19:03:30

它应该动态工作，替换不能解决问题。 – Victor 2013-02-27 19:05:19

回答

在这里，你去...很有趣。 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);

来源

2013-02-27 19:55:22

这是伟大的Michael_B！除了我不想替换现有的HTML。我需要它作为一个单独的字符串。我的问题并不清楚。 – Victor 2013-02-27 20:04:59

@Victor，我再次修改它作为一个元素返回...并显示如何将它作为一个字符串，如果你愿意。 – 2013-02-27 20:09:42

谢谢你，你真棒！ – Victor 2013-02-27 20:17:49

jQuery TreeView中的HTML结构

回答

相关问题