隨著前端開發技術的日益發展，jQuery作為一種非常常用的JS框架，被越來越多的開發者所接受和使用。在實現前端頁面的時候，很多情況下需要遍歷JSON對象，并以樹狀結構展示出來。而在jQuery中，可以輕松地實現這一需求。

首先，我們需要準備好一個JSON對象，它包含了我們需要展示的數據。假設我們的JSON對象如下：

var treeData = [
{
"name": "Fruit",
"type": "folder",
"children": [
{
"name": "apple",
"type": "item"
},
{
"name": "orange",
"type": "item"
}
]
},
{
"name": "Vegetable",
"type": "folder",
"children": [
{
"name": "carrot",
"type": "item"
},
{
"name": "broccoli",
"type": "item"
}
]
}
];

接下來，我們使用jQuery來遍歷這個JSON對象，并將它轉化為樹狀結構。代碼如下：

function buildTree(el, data) {
var markup = '<ul>';
$.each(data, function(index, item) {
markup += '<li>';
if(item.type === 'folder') {
markup += '<div class="folder">' + item.name + '</div>';
markup += buildTree('<ul>', item.children);
} else {
markup += '<div class="item">' + item.name + '</div>';
}
markup += '</li>';
});
markup += '</ul>';
return el.append(markup);
}
buildTree($('#tree'), treeData);

在這段代碼中，我們定義了一個名為buildTree的函數，它接受兩個參數，一個是需要生成樹狀結構的目標元素（el），另一個是包含數據的JSON對象（data）。我們使用jQuery的each方法遍歷JSON對象中的數組，根據type屬性的值來判斷是文件夾還是文件，并在對應的節點上添加相應的class名和文本內容。對于文件夾類型，我們使用遞歸的方式生成內部的節點樹。

最后，我們將生成的樹狀結構插入到目標元素中，完成了整個過程。