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

Question

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

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>