如何解决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
- HelloWorld.docx
- 文件夹:存档
当我点击具有“文件”类的任何 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/ 谢谢
解决方法
好吧,您要查找的 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 元素实际上是父元素。
,在处理您的问题之前,您首先需要更正 HTML。 ul
元素不能是其他 ul
元素的子元素。您需要将 ul
包裹在其关联的 li
中。
您还需要将文件夹名称包装在另一个元素中,例如 span
,以便轻松检索文本。这可以通过浏览文本节点来使用您当前的 HTML,但是编写的代码很混乱并且非常脆弱。一个简单的 HTML 更改是最好的方法。
最后,您可以遍历被点击的 li
的父 .file
元素并颠倒它们的顺序以获得正确格式的路径。从那里您可以附加所选文件的文件名。试试这个:
$.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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。