jquery查找所有具有class的元素并返回被点击元素的计数位置

Question

我不是在寻找$(this).index()仅供参考。所以，我拥有的是两个<ul>带有<li>标签的标签。我想知道哪个<ul>被点击，哪个<li>被点击。例如像 ul 0 和 li 3 这样的东西。所以如果<ul>页面上有 10 个标签，我只想查看带有list点击类的标签。

不适用于我想要的 jQuery 示例：

$('ul').click(function(event) {

  alert($(this).index());

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ul class="list">

  <li>Test</li>

  <li>Test</li>

  <li>Test</li>

  <li>Test</li>

  <li>Test</li>

</ul>

<hr />

<ul class="list">

  <li>Test</li>

  <li>Test</li>

  <li>Test</li>

  <li>Test</li>

  <li>Test</li>

</ul>

单击元素的预期结果：UL # 和 LI #。像 UL0 LI3、UL1 LI3 等...

JSFiddle：http : //jsfiddle.net/cg3a8d6n/

Answer 1

您可以在li元素上使用 click 事件，然后获取其索引以及其父元素的索引，即ul. 您还可以在index方法内指定选择器以仅考虑与选择器匹配的特定元素。$('ul.list li').click(function(event) {&nbsp; const li = $(this).index();&nbsp; const ul = $(this).parent().index('ul.list');&nbsp; console.log(`ul: ${ul} li: ${li}`)});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><ul class="list">&nbsp; <li>Test</li>&nbsp; <li>Test</li>&nbsp; <li>Test</li>&nbsp; <li>Test</li>&nbsp; <li>Test</li></ul><hr /><ul></ul><ul></ul><ul class="list">&nbsp; <li>Test</li>&nbsp; <li>Test</li>&nbsp; <li>Test</li>&nbsp; <li>Test</li>&nbsp; <li>Test</li></ul>