javascript - Jquery 在单击时组合父 li 元素中的文本以获取路径

Question

我在 jquery 上有点挣扎。我有一个如下所示的无序列表。

<ul>
  <li class="folder">Folder: Test</li>
  <ul>
    <li class="folder">Folder: Archive</li>
    <ul>
      <li class="file">
        <div class="filename">HelloWorld.docx</div>
        <div class="size">11.79kiB</div>
        <div class="date">2021-01-12 09:31:34</div>
      </li>
      <li class="file">
        <div class="filename">HelloWorld1.docx</div>
        <div class="size">12.79kiB</div>
        <div class="date">2021-01-11 09:31:34</div>
      </li>
    </ul>
  </ul>
</ul>

看起来像这样

• 文件夹:测试
  • 文件夹:存档
    • HelloWorld.docx
      11.79kiB
      2021-01-12 09:31:34
    • HelloWorld1.docx
      12.79kiB
      2021-01-11 09:31:34

当我单击任何具有"file"类的 li 时，我想通过查找具有“文件夹”类的父 li 来回顾并找出路径结构。

我尝试了各种组合，但无法得到它

这就是我现在正在做的事情

$(document.body).on('click',"li.file",function (e) {
    console.log("clicked");
    $(this).parents("li.folder").each(function() {
        console.log($(this).text());
    });
});

最终我想获取包含父文件夹和变量中的文件名的完整路径。

例如文件路径 =/Test/Archive/HelloWorld.docx

这是一个jsfiddle https://jsfiddle.net/e5d7bcyz/ 谢谢

Answer 1

在解决您的问题之前，您首先需要更正 HTML。 ul 元素不能是其他 ul 元素的子元素。您需要将 ul 包装在其关联的 li 中。

您还需要将文件夹名称包装在另一个元素中，例如 span，以便可以轻松检索文本。这对于您当前的 HTML 来说是可以通过文本节点进行搜索的，但是这样的代码写起来很困惑并且非常脆弱。简单的 HTML 更改是最好的方法。

最后，您可以循环访问所单击的 .file 的父 li 元素，并反转它们的顺序以获得正确格式的路径。从那里您可以附加所选文件的文件名。试试这个:

$.fn.reverse = [].reverse;

$(document).on('click', "li.file", function(e) {
  let $file = $(this);
  let $path = $file.parent().parents('li').reverse();
  let path = $path.map((i, el) => $(el).children('span').text().trim()).get();
  path.push($file.children('.filename').text().trim());
  console.log(path.join('/'));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li class="folder">
    <span>Test</span>
    <ul>
      <li class="folder">
        <span>Archive</span>
        <ul>
          <li class="file">
            <div class="filename">HelloWorld.docs</div>
            <div class="size">11.79kiB</div>
            <div class="date">2021-01-12 09:31:34</div>
          </li>
          <li class="file">
            <div class="filename">HelloWorld1.docs</div>
            <div class="size">12.79kiB</div>
            <div class="date">2021-01-11 09:31:34</div>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>