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

  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>