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（），nearest（），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

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

＆＃13;

$('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());
  }
})

＆＃13;

<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>

＆＃13;

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>

如何在多级UL / LI元素中获得先前的LI

5 个答案: