javascript - 如何获取多级 UL/LI 元素中的先前 LI

Question

我有以下 html 代码:

<ul>
  <li>Parameter1</li>
  <li>Group1
    <ul>
      <li>Parameter2</li>
      <li>Parameter3</li>
    </ul>
  </li>
  <li>Parameter4</li>
  <li>Group2
    <ul>
      <li>Parameter5</li>
    </ul>
  </li>
</ul>

当我在任何 LI 元素上触发 onClick 方法时，我需要获取最接近的前一个 LI 元素。

如果我单击Parameter4，我需要Parameter3 元素。如果我点击 Parameter5 我需要 Group2 元素。

我知道 prev()、closest()、find() 的基础知识，但我无法使其工作。

element.prev('li') 忽略 UL 中的嵌套 LI

我认为我能够用文字编写逻辑:我需要前面的 LI 元素 element.prev('li') 并且如果这个元素内部有 UL，我想要其中的最后一个 LI。如果它没有 UL，则返回我们开始时使用的 prev('li')。

谢谢。

Answer 1

嘿，你可以做这样的事情......我在本地测试了它，它正在工作......

<ul>
  <li>Parameter1</li>
  <li>Group1
    <ul>
      <li>Parameter2</li>
      <li>Parameter3</li>
    </ul>
  </li>
  <li>Parameter4</li>
  <li>Group2
    <ul>
      <li>Parameter5</li>
    </ul>
  </li>
</ul>

像这样的 jQuery

   <script type="text/javascript">
    $('li').on('click',function(event) {

    event.stopPropagation();

    if ($(this).children("ul").length > 0) {

       if($(this).prev('li').length > 0) {

         console.log($(this).prev('li').text());

       }


     } else if ($(this).prev('li').length > 0 && $(this).prev('li').children("ul").length > 0 ) {

       console.log($(this).prev('li').children("ul").find("li:last").text());

     } else if($(this).prev('li').length > 0) {

          console.log($(this).prev('li').clone().children().remove().end().text());

     } else if ($(this).is(":first-child"))  {

        console.log($(this).parent('ul').parent('li').clone().children().remove().end().text().trim());

     } else {

        console.log($(this).closest('ul').prev('li').text());

     }

     });
    </script>

PS:不要忘记也包含 jQuery