jQuery 树视图中的 HTML 结构

Question

我需要在树视图中显示 HTML 结构。我找到了一些 jQuery 树视图插件，但它们通常需要一个列表。

让我们来看一个简单的 HTML（节点可能有不同的标签，不仅仅是 'div'）：

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

我想这样显示：

节点 1

• 节点2
  • 节点3
  • 节点4

现在，我正在使用这个 jQuery 插件：treeview

所以我需要将 HTML 转换为这样的无序列表：

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

我如何使用 jQuery 做到这一点？如果您认为采用不同的方法会更好，请告诉我。

Answer 1

给你...那很有趣。 演示 - 更新为不特定于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);