Question

我的html看起来像这样

<div class="row1">
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
</div>
<div class="row2">
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
</div>
<div class="row3">
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
</div>

这是获取点击项目索引的jquery：

$('li').click(function(){
 var ind = $(this).index();
 alert(ind);
});

这会警告所点击的项目的索引。但是，第1行，第2行和第3行的第1项具有相同的索引。与item2和item3相同。这个，我能理解，因为它属于不同的ul。我想为3 ul创建不同的点击监听器。但我在想你们是否有更好的想法为所有人创建一个监听器，为所有项目提供连续的索引号。

感谢。

Answer 1

您需要跟踪<li>元素列表，然后使用它来确定索引：

var $all_lis = $('li');

$all_lis.on('click', function() {
  var index = $all_lis.index(this);
  alert(index);
});

Demo

第一项将提供0，最后一项将提供8（即第9项）。

Answer 2

您想获取所选ul元素的索引吗？试试这个：

var parentInd = $(this).parent().parent().index();

Answer 3

回调函数中的

this正是你想要的，点击的项目。

使用jquery识别在多级列表中单击的项目

3 个答案: