使用递归展示ul>li>ul>li>ul>li效果,
时间: 2023-07-11 09:35:47 浏览: 55
可以使用HTML和CSS来展示ul>li>ul>li>ul>li的效果,具体的代码如下所示:
HTML代码:
```
<ul>
<li>1</li>
<ul>
<li>1.1</li>
<ul>
<li>1.1.1</li>
</ul>
<li>1.2</li>
</ul>
<li>2</li>
</ul>
```
CSS代码:
```
ul {
list-style: none;
margin: 0;
padding: 0;
}
li {
margin: 0;
padding: 0;
}
ul ul {
margin-left: 20px;
}
ul ul ul {
margin-left: 40px;
}
ul ul ul ul {
margin-left: 60px;
}
```
通过设置ul和li的样式实现缩进效果,ul的样式设置了list-style、margin和padding,li的样式设置了margin和padding。ul ul、ul ul ul和ul ul ul ul分别代表第二级、第三级和第四级的ul标签,通过设置margin-left实现缩进效果。
相关问题
ul>li>ul>li>ul>li
可以使用类似以下的代码来生成 `ul>li>ul>li>ul>li` 这样的 HTML 结构:
```javascript
// 创建外层ul元素
const outerUl = document.createElement("ul");
// 创建第一个li元素
const li1 = document.createElement("li");
// 创建内层ul元素
const innerUl1 = document.createElement("ul");
// 创建内层li元素
const innerLi1 = document.createElement("li");
// 创建内层ul元素
const innerUl2 = document.createElement("ul");
// 创建内层li元素
const innerLi2 = document.createElement("li");
// 创建内层ul元素
const innerUl3 = document.createElement("ul");
// 创建内层li元素
const innerLi3 = document.createElement("li");
// 将内层li元素添加到内层ul元素中
innerUl3.appendChild(innerLi3);
// 将内层ul元素添加到内层li元素中
innerLi2.appendChild(innerUl3);
// 将内层li元素添加到内层ul元素中
innerUl2.appendChild(innerLi2);
// 将内层ul元素添加到内层li元素中
innerLi1.appendChild(innerUl2);
// 将内层li元素添加到内层ul元素中
innerUl1.appendChild(innerLi1);
// 将内层ul元素添加到第一个li元素中
li1.appendChild(innerUl1);
// 将第一个li元素添加到外层ul元素中
outerUl.appendChild(li1);
// 将外层ul元素添加到body中
document.body.appendChild(outerUl);
```
这段代码会生成以下的 HTML 结构:
```html
<ul>
<li>
<ul>
<li>
<ul>
<li>
<ul>
<li></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
```
需要注意的是,这种方式不是很常见,一般来说没有这么多层嵌套。而且这种方式比较繁琐,不太容易维护。如果需要生成多层嵌套的 HTML 结构,可以考虑使用递归的方式来实现。
for 循环ul li 生成树形图
好的,下面是一个使用 `for` 循环来生成树形结构的示例代码:
```html
<ul id="tree"></ul>
```
```javascript
const data = [
{ id: 1, name: '节点1', parentId: 0 },
{ id: 2, name: '节点2', parentId: 1 },
{ id: 3, name: '节点3', parentId: 1 },
{ id: 4, name: '节点4', parentId: 2 },
{ id: 5, name: '节点5', parentId: 2 },
{ id: 6, name: '节点6', parentId: 4 },
{ id: 7, name: '节点7', parentId: 4 },
];
function createTree(data) {
const map = {};
const roots = [];
data.forEach(item => {
const node = { id: item.id, name: item.name, children: [] };
map[item.id] = node;
if (item.parentId === 0) {
roots.push(node);
} else {
const parent = map[item.parentId];
parent.children.push(node);
}
});
return roots;
}
function renderTree(node, level) {
const ul = document.createElement('ul');
node.forEach(item => {
const li = document.createElement('li');
const text = document.createTextNode(item.name);
li.appendChild(text);
ul.appendChild(li);
if (item.children.length > 0) {
const childrenUl = renderTree(item.children, level + 1);
childrenUl.style.marginLeft = `${level * 20}px`;
li.appendChild(childrenUl);
}
});
return ul;
}
const tree = createTree(data);
const treeEl = document.getElementById('tree');
treeEl.appendChild(renderTree(tree, 0));
```
上面的代码首先定义了一个包含节点数据的数组 `data`,然后定义了一个 `createTree` 函数,用于将节点数据转换为树形结构。在 `createTree` 函数中,我们使用了一个 `map` 对象来存储每个节点的引用,然后遍历每个节点,如果它是根节点,则将其添加到 `roots` 数组中,否则找到它的父节点,将其添加到父节点的 `children` 数组中。
接下来,我们定义了一个 `renderTree` 函数,用于将树形结构渲染为 HTML。在 `renderTree` 函数中,我们使用 `document.createElement` 方法创建 `ul` 和 `li` 元素,然后遍历每个节点,将节点的名称添加到 `li` 中,然后递归调用 `renderTree` 函数,将子节点渲染为 HTML,并将其添加到当前节点的 `li` 元素中。最后,我们将根节点渲染为 HTML,并将其添加到页面中的 `ul` 元素中。