<ul> <li> 从 jQuery 中的输入数组动态生成列表

Question

我的web应用程序具有以下树视图，以便显示一些文件和文件。

ul {
list-style-type: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" />
<ul id="myTreeSelector">
<li>
<span class="caret folder-selector"><i class="fa fa-folder"></i> first_folder</span>
<ul class="nested">
<li class="file"><i class="fa fa-file"></i> app1.dat</li>
<li class="file"><i class="fa fa-file"></i> app2.dat</li>
<li>
<span class="caret folder-selector"><i class="fa fa-folder"></i> second_folder</span>
<ul class="nested">
<li class="file"><i class="fa fa-file"></i> ret.dat</li>
<li><span class="caret folder-selector"><i class="fa fa-folder"></i> third_folder</span></li>
</ul>
</li>
</ul>
</li>
</ul>

这只是一个静态的例子，我想使用jQuery从一个输入数组中创建这个文件夹。

按照上面的例子(并添加最后一个元素作为新的空目录(，我的输入数组如下：

arrayOfFiles= ["/first_folder/app1.dat","/first_folder/app2.dat","/first_folder/second_folder/ret.dat", "/first_folder/second_folder/third_folder"]

如何使用jQuery迭代该数组并创建正确的文件夹结构？到目前为止，这是我的尝试，我知道我可以使用appendTo向HTML添加内容，但我很难管理文件夹的内容。

general_ul = $("#myTreeSelector")
general_li = $('</li>').appendTo(general_ul);
arrayOfPaths.forEach( function(pathOrFile) {
var li = $('<li/>')
.html('<span class="caret folder-selector"><i class="fa fa-folder"></i> first_folder</span>')
.appendTo(general_li);
});

提前谢谢。

Answer 1

我重新设计了我的项目，使其尽可能接近您的需求。这不是jQuery，但我希望这能帮助你！

JS/HTML/CSS

var arrayOfFiles = [
"/first_folder/app_01.dat",
"/first_folder/app_02.dat",
"/first_folder/second_folder/ret_01.dat",
"/first_folder/second_folder/ret_02.dat",
"/first_folder/second_folder/third_folder",
"/other_first_folder/other_app_01.dat",
"/other_first_folder/other_app_02.dat",
"/other_first_folder/other_sec_folder/other_app_03.dat",
"/other_first_folder/other_sec_folder/other_app_04.dat",
"/new_folder/new_other_folder/last_folder",
];
var wrap = document.getElementById("myTreeSelector");
var lines = "----";
var res = {};
function makeObj(obj) {
var splme = obj.split('/').slice(1);
var f = res;
for (i = 0; i < splme.length; i++) {
obName = { name: splme[i] };
f = f[splme[i]] = f[splme[i]] || obName;
}
}
arrayOfFiles.map(makeObj);
var tmp = [];
function prsObj(x, y) {
for (var k in x) {
if (typeof x[k] === 'object' && x[k] !== null) {
prsObj(x[k], y);
}
else if (x.hasOwnProperty(k)) {
y(x[k]);
}
tmp.push(lines);
}
};
prsObj(res, function (ftmp) { tmp.push(ftmp); });
var redy = [];
for (var i = 0; i < tmp.length - 1; i++) {
if (tmp[i] !== lines) {
redy.push(tmp[i]);
}
else if (tmp[i] === lines && tmp[i + 1] === lines) {
redy.push("file");
i++;
}
else if (tmp[i] === lines && tmp[i + 1] !== lines) {
redy.push("folder");
} else { }
}
redy.pop();
var text = '';
var x = 0;
var y = 0;
for (var i = 0; i < redy.length; i++) {
if (y === 1) {
var text = document.createTextNode(redy[i]);
addThis(0);
x = 0;
y = 0;
}
else if (redy[i + 1] === "file" && redy[i + 2] === "file") {
if (redy[i].indexOf(".") > -1) {
var text = document.createTextNode(redy[i]);
addThis(1);
i = i + 2; 
x = 0;
y = 1;
} else {
var text = document.createTextNode(redy[i]);
addThis(2);
i = i + 2;
x = 0;
y = 1;
}
}
else if (redy[i + 1] === "folder" && i === 0) {
var text = document.createTextNode(redy[i]);
addThis(0);
x++;
y = 0;
}
else if (redy[i + 1] === "folder" && x >= 1 || redy[i + 1] === "folder") {
var text = document.createTextNode(redy[i]);
addThis(2);
x++;
y = 0;
}
else if (redy[i + 1] === "file") {
if (redy[i] === '') { continue; }
else if (redy[i].indexOf(".") > -1) {
var text = document.createTextNode(redy[i]);
addThis(1);
y = 0;
} else {
var text = document.createTextNode(redy[i]);
addThis(2);
y = 0;
}
}
else { }
}
function addThis(x) {
if (x === 0) {
var li = document.createElement("li");
var span = document.createElement("span");
span.setAttribute("class", "caret folder-selector");
var iel = document.createElement("i");
iel.setAttribute("class", "fa fa-folder");
var ul = document.createElement("ul");
ul.setAttribute("class", "nested");
span.appendChild(iel);
span.appendChild(text);
li.appendChild(span);
wrap.appendChild(li);
li.appendChild(ul);
}
if (x === 1) {
var get = wrap.getElementsByClassName("nested");
var ul = get[get.length - 1];
var iel = document.createElement("i");
iel.setAttribute("class", "fa fa-file");
var li = document.createElement("li");
li.setAttribute("class", "file");
ul.appendChild(li);
li.appendChild(iel);
li.appendChild(text);
}
if (x === 2) {
var get = wrap.getElementsByClassName("nested");
var ul = get[get.length - 1];
var li = document.createElement("li");
var span = document.createElement("span");
span.setAttribute("class", "caret folder-selector");
var iel = document.createElement("i");
iel.setAttribute("class", "fa fa-folder");
ul.appendChild(li);
li.appendChild(span);
span.appendChild(iel);
span.appendChild(text);
var get = wrap.querySelectorAll("li")
var li = get[get.length - 1];
var ul = document.createElement("ul");
ul.setAttribute("class", "nested");
li.appendChild(ul);
}
}

ul {
list-style-type: none;
}
i {
margin-right: 5px;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" />
<ul id="myTreeSelector">
</ul>