Javascript 如何在多级UL/LI元素中获取以前的LI

我有以下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>

参数1
第一组

参数2
参数3


参数4
第2组

参数5

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

如果单击

Parameter4

我需要

Parameter3

元素。 如果单击

Parameter5

我需要

Group2

元素

我知道prev（）、closest（）、find（）的基本知识，但我无法让它工作

element.prev（'li'）

忽略UL中的嵌套LIs

---

我想我能够用文字来写逻辑：我需要前面的LI元素

element.prev（'LI'）

，如果这个元素里面有UL，我需要最后一个LI。如果没有UL，则返回我们开始使用的

prev（'li'）

谢谢。

$（文档）.ready（函数（）{
$（'ul li'）。单击（函数（事件）{
event.stopPropagation（）；
var self=$（这是）；
if（self.prev（）是（'li'）和&！self.prev（'li'）。children（）是（'ul'））{
console.log（self.prev（'li'）.text（））；
}
else如果（self.prev（）.is（'li'）和&self.prev（'li'）.children（）.is（'ul'））{
console.log（self.prev（'li'）.children（'ul'）.children（'li'）.last（）.text（））；
} 
如果（self.parent（'ul'）.parent（）是（'li'）&！self.prev（）是（'li'））{
console.log（self.parent（'ul'）.parent（'li'）.prev（'li'）.text（））；
}否则{
log（“没有以前的元素”）；
}
});
});


参数1
第一组

参数2
参数3


参数4
第2组

参数5


试试这个：

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

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


$（'li'）。单击（函数（e）{
e、 停止传播（）
var prev=$（e.target）.prev（）；
var parent=$（e.target）.parent（）最近（'li'）；
if（上一个查找（'ul li'）。长度）{
console.log（prev.find（'ulli:last'）.text（））；
}否则
if（parent.length&！prev.length）{
console.log（parent.clone（）.find（'ul'）.remove（）.end（）.text（））
}否则{
console.log（prev.text（））；
}
})


参数1
第一组

参数2
参数3
GroupX

参数




参数4
第2组

参数5


我带来了这个解决方案。我自己冒昧地使用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());
         }
    }  
});

嘿，你可以这样做。。我在本地测试了这个，它正在工作

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


参数1
第一组

参数2
参数3


参数4
第2组

参数5




像这样的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>


$（'li'）。在（'click'，函数（事件）{
event.stopPropagation（）；
如果（$（此）.children（“ul”）.length>0）{
if（$（this）.prev（'li'）.length>0）{
log（$（this.prev（'li'）.text（））；
}
}如果（$（this.prev（'li'）.length>0&$（this.prev（'li'）.children（'ul'）.length>0），则为else{
console.log（$（this.prev（'li'）.children（“ul”）.find（“li:last”）.text（））；
}else if（$（this）.prev（'li'）。长度>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（））；
}否则{
console.log（$（this.closest（'ul'）.prev（'li'）.text（））；
}
});

PS：别忘了也包括jQuery
只有
li
可以是
ul
的直接子项现在编辑的代码正确吗？我想我的问题仍然存在。如何在单击
Parameter4
时获取
Parameter3
，而在单击
Group2
时仍然获取
Parameter4
？我想我能够用文字来编写逻辑：我需要前面的LI元素
元素。prev（'LI'）
，如果这个元素中有UL，我需要最后一个LI。如果它没有UL，请返回我们开始使用的
prev（'li'）
。或者换句话说，我只需要代码中最接近的前一个li元素（我不关心父母、孩子、兄弟姐妹）。@Neon:请检查我的回答这没有反映OP的HTML结构。尽管它有缺陷，但关键是OP想要使用多层次的list@RoryMcCrossan他使用的HTML结构无效。我认为他拼错了。我的错没错，但正如我所说，关键是OP想要使用多级结构。一旦他修正了HTML，这就行不通了。如果你更新答案以反映OPs更新的HTML，我很乐意删除否决票sample@RoryMcCrossan当前位置这是他想要的吗？有些东西告诉我，这种答案可能很接近。我将测试并使用它。如果我测试正确，当我单击
Parameter4
时，这不会得到
Parameter3
。它给了我
Group1
。可能很接近，但请检查我更新的HTML代码，我只需要LI元素的“text”。您的代码将返回更多以前LI的文本。这是我为fiddle制作的新HTML代码，请查看并告诉我，如果缺少什么或您想要什么，我已经以不同的方式解决了问题，但为了选择正确的答案，我愿意与您合作。但是你真的测试过代码吗？因为很少有点击告诉我，它根本不像我描述的那样工作。我不确定你是否喜欢