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>

看起来像这样

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

当我单击任何具有“file”类的 li 时，我想回顾并通过查找具有类“folder”的父 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/ 谢谢

JavaScript jQuery HTML-列表嵌套列表

<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 元素实际上是父元素。

$.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>

上一个：将类添加到 4 级超级菜单的每个子菜单级别

下一个：将多个函数转换为一个在jquery中执行相同操作的函数

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

Jquery combining text from parent li elements on click to get path

评论

评论