时间戳

首页 > 解决方案 > Jquery在单击时组合来自父li元素的文本以获取路径

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

问题描述

我在 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>

看起来像这样

当我单击具有“文件”类的任何 li 时，我想回顾并通过找到具有类“文件夹”的父 li 来确定路径结构是什么。

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

这就是我目前正在使用的

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

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

例如 pathtofile = /Test/Archive/HelloWorld.docx

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

标签： javascriptjqueryhtml-listsnested-lists

解决方案

好吧，您正在寻找的 LI 并不是真正的父母，因为他们没有包装当前的 li.file 元素。

  <ul>
    <li class="folder">Folder: Archive</li> // You close the LI tag. So it's not a parent of the rest of the code.
    <ul>
      <li class="file">

尝试使用 LI 标记包装其余代码：

<ul>
  <li class="folder">Folder: Test
    <ul>
      <li class="folder">Folder: Archive
      <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>
     </li> //closing the second parent: Folder: Archive
    </ul>
  </li> //closing the first parent: Folder: test
</ul>

据我所知，它是有效的 HTML 代码。然后那些 li.folder 元素实际上是父母。

推荐阅读