如何在多级 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

Answer 2

尝试这个 ：

$('ul li').click(function(e) {
var element = $(this);
if(element.prevAll('li').length > 0) {
   element.prev('li').text();
} else {
   element.closest('ul').parent('li').text();
}  
e.stopImmediatePropagation();
});

Answer 3

您可以尝试测试每个元素以查看前一个元素是否具有列表并采用最后一个元素，或者该元素是否是父列表的一部分并采用父列表值：

 $('li').click(function(e) { e.stopPropagation() var prev = $(e.target).prev(); var parent = $(e.target).parent().closest('li'); if (prev.find('ul li').length) { console.log(prev.find('ul li:last').text()); } else if (parent.length && !prev.length) { console.log(parent.clone().find('ul').remove().end().text()) } else { console.log(prev.text()); } })

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul> <li>Parameter1</li> <li>Group1 <ul> <li>Parameter2</li> <li>Parameter3</li> <li>GroupX <ul> <li>ParameterX</li> </ul> </li> </ul> </li> <li>Parameter4</li> <li>Group2 <ul> <li>Parameter5</li> </ul> </li> </ul>

Answer 4

我带着这个解决方案来了。 冒昧地自己使用jQuery。 这里有一些重复的代码，但这只是想法。

$('li').click(function(e) {
    e.stopPropagation();
    if($(this).prev('li').length == 0) {
        if($(this).parent().parent().prev('li').has('ul').length) {
            console.log($(this).parent().parent().prev('li').children('ul').find('li:last').text());
        } else {
            console.log($(this).parent().parent().prev('li').text());
        }
    } else {
         if($(this).prev('li').has('ul').length) {
            console.log($(this).prev('li').children('ul').find('li:last').text());
         } else {
            console.log($(this).prev('li').text());
         }
    }  
});

Answer 5

 $(document).ready(function() { $('ul li').click(function(event) { event.stopPropagation(); var self = $(this); if (self.prev().is('li') && !self.prev('li').children().is('ul')) { console.log(self.prev('li').text()); } else if (self.prev().is('li') && self.prev('li').children().is('ul')) { console.log(self.prev('li').children('ul').children('li').last().text()); } else if (self.parent('ul').parent().is('li') && !self.prev().is('li')) { console.log(self.parent('ul').parent('li').prev('li').text()); } else { console.log('no previous element'); } }); });

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