jquery 查找所有具有类的元素，并返回单击的元素的计数位置

Question

我不是在寻找$(this).index()作为仅供参考。 所以，我有两个<ul>标签，里面有<li>标签。 我想知道单击了哪个<ul>，单击了哪个<li>。 例如，像 ul 0 和 li 3 这样的东西。因此，如果页面上有 10 个<ul>标签，我只想查看带有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元素上使用单击事件，然后获取其索引以及其父级的索引，即ul。您还可以在index方法中指定选择器，以仅考虑与选择器匹配的特定元素。

$('ul.list li').click(function(event) {
const li = $(this).index();
const ul = $(this).parent().index('ul.list');
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">
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
</ul>
<hr />
<ul></ul>
<ul></ul>
<ul class="list">
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
</ul>