JQuery是一個(gè)輕量級(jí)的JavaScript庫(kù)，因?yàn)樗峁┝碎_發(fā)人員可以輕松使用的便捷功能，可以對(duì)HTML文檔進(jìn)行簡(jiǎn)化和處理。在這篇文章中，我們將介紹如何使用JQuery遞歸遍歷生成ul的方法。

function createList(data, $parent) {
var $ul = $("<ul>");
$parent.append($ul);
$.each(data, function(index, value) {
var $li = $("<li>");
$ul.append($li);
$li.text(value.text);
if (value.children && value.children.length) {
createList(value.children, $li);
}
});
}
var data = [
{
text: "Level 1",
children: [
{
text: "Level 2",
children: [
{
text: "Level 3",
children: [
{
text: "Level 4"
}
]
}
]
}
]
}
];
createList(data, $("#list-container"));

該函數(shù)的作用是生成一個(gè)嵌套的無(wú)序列表。將數(shù)據(jù)對(duì)象和父級(jí)$ ul的JQuery元素作為參數(shù)傳遞給它。它通過(guò)使用each（）方法循環(huán)遍歷數(shù)據(jù)對(duì)象。每個(gè)值都用li元素封裝。如果值具有子級(jí)，則該函數(shù)遞歸調(diào)用自身并將子值和li作為$ parent傳遞。

此時(shí)，我們已經(jīng)生成了一個(gè)嵌套的無(wú)序列表，但還需要一些CSS樣式以美化列表。

ul {
list-style: none;
padding-left: 20px;
}
li {
margin-left: -15px;
}
li:before {
content: "";
display: inline-block;
width: 10px;
height: 10px;
border-radius: 50%;
margin-right: 10px;
background-color: #444;
}
li:last-child:before {
display: none;
}

最后，我們將CSS樣式應(yīng)用于父級(jí)元素，并將其附加到HTML中的容器中。

<div id="list-container"></div>

我們已經(jīng)成功地使用JQuery遞歸遍歷生成嵌套的無(wú)序列表，并使用CSS樣式進(jìn)行美化。這個(gè)方法可以被使用在很多場(chǎng)合，例如菜單、網(wǎng)站導(dǎo)航、文件夾等等。