jquery怎么写树状
时间: 2023-10-13 19:26:41 浏览: 43
jQuery可以使用递归函数来生成树状结构。下面是一个简单的示例代码:
HTML结构:
```
<div id="tree">
<ul>
<li>节点1</li>
<li>节点2
<ul>
<li>子节点1</li>
<li>子节点2</li>
</ul>
</li>
<li>节点3</li>
</ul>
</div>
```
JavaScript代码:
```
$(document).ready(function() {
// 递归函数
function buildTree(node, ul) {
// 循环遍历所有子节点
node.children().each(function() {
var li = $("<li>" + $(this).text() + "</li>");
ul.append(li);
if ($(this).children().length > 0) {
var subUl = $("<ul></ul>");
li.append(subUl);
buildTree($(this), subUl);
}
});
}
// 初始化树状结构
var tree = $("#tree");
var root = tree.children().first();
var ul = $("<ul></ul>");
tree.empty().append(ul);
buildTree(root, ul);
});
```
这段代码会将原始的无序列表转化为一个嵌套的树状结构,并且支持多级子节点。你可以根据需要调整HTML结构和JavaScript代码。