Javascript Jquery选择ul之外的li？

我的代码（标记已更改！TNX）：

第一类


子类别1


子类别2


第2类


子类别3


子类别4


子类别5

我想在用户单击子类别时获取该类别的文本。 例如：单击“子类别2”给我文本“类别1”

$（文档）.on（'click'，'subcategory'，函数（e）{
e、 防止违约；
var text=$（this.parents（'ul'）.first（）.prev（）.find（'a'）.html（）；
警报（文本）；
});



第一类



子类别1


子类别2



第2类



子类别3


子类别4


子类别5


我的建议是首先修复HTML标记，如下所示：

<ul>
   <li class="category"><a>CATEGORY A</a>
       <ul>
           <li class="subcategory">SUBCATEGORY A1</li>
           <li class="subcategory">SUBCATEGORY A2</li>
       </ul>
   </li>
   <li class="category"><a>CATEGORY B</a>
      <ul>
        <li class="subcategory">SUBCATEGORY B1</li>
        <li class="subcategory">SUBCATEGORY B2</li>
     </ul>
  </li>
</ul>

警报功能仅用于显示正确的结果，可根据需要进行更改。
这里还有一个指向JSFIDLE的演示链接：
在此处输入代码$（“li”）。单击（“单击”，函数（）{
$（this.parent（“ul”）.parent（“ul”）.find（“li”）.html（）；
});
在此处输入代码
















在这种方法中，您必须更改您的标记。
我建议更改HTML，如下所示，然后使用jquery代码：

<ul>
   <li class="category"><a>category 1</a></li>
   <li class="subcat">
       <ul>
           <li class="subcategory"><a>subcategory 1</a></li>
           <li class="subcategory"><a>subcategory 2</a></li>
       </ul>
   </li>
   <li class="category"><a>category 2</a></li>
   <li class="subcat">
     <ul>
        <li class="subcategory"><a>subcategory 3</a></li>
        <li class="subcategory"><a>subcategory 4</a></li>
     </ul>
  </li>
</ul>

JSFIDLE-
不是有效的标记请显示您已尝试的内容。因此，这不是让人们为你工作的地方。在
或
之外，不应该有任何
元素；也就是说，正如所指出的，这是完全无效的HTML。这不是所指出的有效HTML。关于您的问题，最简单、更简洁的方法是在每个
上添加一个自定义属性，例如data parent element=“category 1”，并访问该属性。它仍然不是有效的语法。
ul
不是
ul
的有效子元素，只有
li
元素是
ul
的有效子元素。这并不能解决标记无效的事实。您不应该假设这会起作用，因为给定HTML代码的结果DOM可能不同。浏览器可能会引入
li
元素来修复无效语法。这不应被接受为答案，因为标记仍然无效，并且可能会产生与预期不同的结果。使用小提琴的注释不会修复错误的答案。我将使用
.closest（'.subcat'）
而不是
.parents（'.subcat'））
，因为
父项
将搜索到文档根，而
最近的
将在第一个匹配元素处停止搜索。
$(document).ready(function() {
    $("li.subcategory").click(function(){
        alert($(this).parent().prev().text());
    });
});

enter code here $("li").on("click",function(){
                    $(this).parent("ul").parent("ul").find("li").html();
                });
enter code here <ul>
                   <li></li>
                   <ul>
                      <li></li>
                      <li></li>
                   </ul>
                 </ul>
                <ul>
                   <li></li>
                   <ul>
                      <li></li>
                      <li></li>
                      <li></li>
                   </ul>
                 </ul>

<ul>
   <li class="category"><a>category 1</a></li>
   <li class="subcat">
       <ul>
           <li class="subcategory"><a>subcategory 1</a></li>
           <li class="subcategory"><a>subcategory 2</a></li>
       </ul>
   </li>
   <li class="category"><a>category 2</a></li>
   <li class="subcat">
     <ul>
        <li class="subcategory"><a>subcategory 3</a></li>
        <li class="subcategory"><a>subcategory 4</a></li>
     </ul>
  </li>
</ul>

$("li.subcategory").click(function(){
   console.log($(this).parents('.subcat').prev().find('a').text());
});