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

Question

有了下面的 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>

输出数据：

onclick of 22222，输出文本如“22222”。
onclick of 55555，输出为文本 "TEST1/10000_old/55555"
onclick of 10005，输出为文本 "TEST2/10005"
点击 50000 次，输出文本形式 "TEST3/12000_old/50000"

Answer 1

您可以使用 .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").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);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

Answer 2

使用parentsUntil、forEach、filter和map

$( "a" ).click( function(e){
   e.preventDefault();
   var value = $(this).parentsUntil( ".file-tree" ).filter( (s, i) => i.nodeName == "LI" ).map( (s, i) => i.querySelector( "a" ).innerHTML ).get().join( "/" );
   console.log( value );
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

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

Get top parents on click of last child element as custom text in Multilevel UL LI traversal

html

javascript

jquery

traversal