Javascript 带jQuery的treeview中的HTML结构

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

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

我想这样显示它：

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

节点1

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

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

因此，我需要将HTML转换为无序列表，如下所示：

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

节点1

节点2

节点3
节点4

---

如何使用jQuery实现这一点？如果你认为另一种方法更好，请告诉我。

给你……那很有趣。-更新为不特定于

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);

$.fn.convertToUL=函数（isTop）{
如果（isTop==null）isTop=true；
var ul=$（“
”）；
var li=$（“
”）；
li.append（$（this.attr（“id”））；
var子代=0；
$（this）.children（）.each（function（））{
ul.append（$（this.convertToUL（false））；
儿童++；
});
如果（子项>0）
附加（ul）；
if（li.is（':empty'））
返回“”；
如果（isTop）
返回$（“
”）。追加（li）；
返回李；
}
//要获取元素的文本，请使用.wrap（“”）.parent（）.html（）
var ulElement=$（“#node1”）.convertToUL（）；
警报（ulement.wrap（“”）.parent（）.html（））；
$（“#节点1”）。替换为（ulElement）；

您不能在源代码编辑器中执行字符串替换吗？它应该动态工作，替换不能解决问题。这太棒了！除了我不想替换现有的HTML。我需要它作为一个单独的字符串。我的问题不清楚。@Victor，我再次修改了它，将其作为元素返回……并演示了如果您愿意，如何将其作为字符串返回。