Javascript 生成动态a<；ul>&书信电报；李>；从jQuery中的输入数组中列出

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

ul{
列表样式类型：无；
}

第一个文件夹

app1.dat
app2.dat

第二个文件夹

ret.dat
第三个文件夹

我重新设计了我的项目，使其尽可能接近您的需要。 这不是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”，
“/第一个文件夹/第二个文件夹/第三个文件夹”，
“/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_secu folder/other_app_04.dat”，
“/new\u folder/new\u other\u folder/last\u folder”，
];
var wrap=document.getElementById（“myTreeSelector”）；
变量行=“-----”；
var res={}；
函数makeObj（obj）{
var splme=obj.split（'/'）.slice（1）；
var f=res；
对于（i=0；i-1）{
var text=document.createTextNode（redy[i]）；
添加此（1）；
i=i+2；
x=0；
y=1；
}否则{
var text=document.createTextNode（redy[i]）；
添加此（2）；
i=i+2；
x=0；
y=1；
}
}
else if（redy[i+1]=“文件夹”&&i==0）{
var text=document.createTextNode（redy[i]）；
加上这个（0）；
x++；
y=0；
}
else if（redy[i+1]=“folder”&&x>=1 | | redy[i+1]=“folder”）{
var text=document.createTextNode（redy[i]）；
添加此（2）；
x++；
y=0；
}
else if（redy[i+1]=“文件”）{
如果（redy[i]=''{continue；}
else if（redy[i].indexOf（“.”>-1）{
var text=document.createTextNode（redy[i]）；
添加此（1）；
y=0；
}否则{
var text=document.createTextNode（redy[i]）；
添加此（2）；
y=0；
}
}
else{}
}
函数addThis（x）{
如果（x==0）{
var li=document.createElement（“li”）；
var span=document.createElement（“span”）；
setAttribute（“类”、“插入符号文件夹选择器”）；
var iel=document.createElement（“i”）；
iel.setAttribute（“类”、“fa文件夹”）；
var ul=document.createElement（“ul”）；
ul.setAttribute（“类”、“嵌套”）；
span.儿童（iel）；
span.appendChild（文本）；
李.儿童（span）；
包装。附属物（李）；
李.儿童（ul）；
}
如果（x==1）{
var get=wrap.getElementsByClassName（“嵌套”）；
var ul=get[get.length-1]；
var iel=document.createElement（“i”）；
iel.setAttribute（“类”、“fa文件”）；
var li=document.createElement（“li”）；
li.setAttribute（“类”、“文件”）；
ul.儿童（li）；
李.儿童（iel）；
李.附件（文本）；
}
如果（x==2）{
var get=wrap.getElementsByClassName（“嵌套”）；
var ul=get[get.length-1]；
var li=document.createElement（“li”）；
var span=document.createElement（“span”）；
setAttribute（“类”、“插入符号文件夹选择器”）；
var iel=document.createElement（“i”）；
iel.setAttribute（“类”、“fa文件夹”）；
ul.儿童（li）；
李.儿童（span）；
span.儿童（iel）；
span.appendChild（文本）；
var get=wrap.querySelectorAll（“li”）
var li=get[get.length-1]；
var ul=document.createElement（“ul”）；
ul.setAttribute（“类”、“嵌套”）；
李.儿童（ul）；
}
}

ul{
列表样式类型：无；
}
我{
右边距：5px；
}

这是一个纯JS解决方案：感谢您的回复！这似乎有效，但我有一个小问题。如果添加另一项，则当它是文件（）时，将显示文件夹图标。你能帮我修一下吗？非常感谢。顺便说一句：我编辑你的代码是为了添加文件夹图标

fa-fa-file

）。我想我已经修复了你想要的东西。请再试一次问题仍在继续，请检查最后一个项目的图标，

other_app_04.dat

，当它是一个文件时，它会作为文件夹打印：最后一件事（非常抱歉！）。如果你有一个只包含文件夹的树，则会显示空文件：仍然是相同的问题：（请检查

other_app）