Javascript 在多级ulli遍历中，单击最后一个子元素作为自定义文本获取顶级父元素

使用下面的html数据，我可以得到如下输出

目录结构：

10000
22222
TEST1
|-- 10000_old
|   `-- 55555
|-- 10001
`-- 10006
TEST2
|-- 10002
|-- 10005
`-- 11000_old
    `-- 20001
TEST3
|-- 10003
|-- 10004
|-- 11000_old
|   `-- 10001
`-- 12000_old
    `-- 10000

HTML数据：

<ul class='file-tree' style='padding-left: 0px;'>
   <li class='treeclass'><a  href='#' id='10000'>10000</a></li>
   <li class='treeclass'><a  href='#' id='22222'>22222</a></li>
   <li class='treeclass'>
      <a href='#' id='TEST1'>TEST1</a>
      <ul class='new_ul'>
         <li class='treeclass'>
            <a href='#' id='10000_old'>10000_old</a>
            <ul class='new_ul'>
               <li class='treeclass'><a  href='#' id='55555'>55555</a></li>
            </ul>
         </li>
         <li class='treeclass'><a  href='#' id='10001'>10001</a></li>
         <li class='treeclass'><a  href='#' id='10006'>10006</a></li>
      </ul>
   </li>
   <li class='treeclass'>
      <a href='#' id='TEST2'>TEST2</a>
      <ul class='new_ul'>
         <li class='treeclass'><a  href='#' id='10002'>10002</a></li>
         <li class='treeclass'><a  href='#' id='10005'>10005</a></li>
         <li class='treeclass'>
            <a href='#' id='11000_old'>11000_old</a>
            <ul class='new_ul'>
               <li class='treeclass'><a  href='#' id='20001'>20001</a></li>
            </ul>
         </li>
      </ul>
   </li>
   <li class='treeclass'>
      <a href='#' id='TEST3'>TEST3</a>
      <ul class='new_ul'>
         <li class='treeclass'><a  href='#' id='10003'>10003</a></li>
         <li class='treeclass'><a  href='#' id='10004'>10004</a></li>
         <li class='treeclass'>
            <a href='#' id='11000_old'>11000_old</a>
            <ul class='new_ul'>
               <li class='treeclass'><a  href='#' id='10001'>10001</a></li>
            </ul>
         </li>
         <li class='treeclass'>
            <a href='#' id='12000_old'>12000_old</a>
            <ul class='new_ul'>
               <li class='treeclass'><a  href='#' id='50000'>50000</a></li>
            </ul>
         </li>
      </ul>
   </li>
</ul>

输出数据：

单击22222，获得文本输出，如“22222”

单击55555，获得文本输出，如“TEST1/10000_old/55555”

单击10005，获得文本输出，如“TEST2/10005”

单击50000，获得文本输出，如“TEST3/12000\u old/50000”

---

您可以使用

.parentsUntil（“ul.file tree”）

并选择每个

li

。在每次迭代中，获取其中第一个

a

的

id

$(".treeclass a").on("click", function(){
  var path = [];
  $(this).parentsUntil("ul.file-tree").each(function(){
    if($(this).is("li"))
      path.push($(this).children("a").eq(0).attr("id"));
  });
  var actualPath = path.reverse().join("/");
  console.log(actualPath);
});

$（.treeclass a”）。在（“单击”，函数（）上{
var路径=[]；
$（this）.parentsUntil（“ul.file树”）.each（function（）{
如果（$（此）.is（“li”））
path.push（$（this）.children（“a”）.eq（0）.attr（“id”））；
});
var actualPath=path.reverse（）.join（“/”）；
console.log（实际路径）；
});










































使用
parentsUntil
，
forEach
，
过滤器和
映射


$（“a”）。单击（功能（e）{
e、 预防默认值（）；
var value=$（this.parentsUntil（“.file tree”）.filter（（s，i）=>i.nodeName==“LI”）.map（（s，i）=>i.querySelector（“a”）.innerHTML.get（）.join（“/”）；
console.log（值）；
})










































欢迎使用堆栈溢出！请拿着这本书，通读一遍，特别是做你的研究，看看相关的主题，然后试一试。如果你在做了更多的研究和搜索后陷入困境，无法摆脱困境，请发布一份你的尝试，并明确指出你陷入困境的地方。人们会乐意帮忙的。祝你好运