使用 jquery 识别在多级列表中单击了哪个项目答案

【问题标题】：identifying which item is clicked in a multi level list using jquery使用 jquery 识别在多级列表中单击了哪个项目
【发布时间】：2013-04-17 09:37:04
【问题描述】：

我的 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);
});

这会提醒点击项目的索引。但是，row1、row2 和 row3 的项目 1 具有相同的索引。与 item2 和 item3 相同。这个，我可以理解，因为它属于不同的ul。我正在考虑为 3 ul 创建不同的点击侦听器。但是我在想你们是否有更好的主意，为所有项目创建一个侦听器，这将为所有项目提供连续的索引号。

谢谢。

【问题讨论】：

你可以取 li 元素并寻找它的 div 父元素，然后使用父元素的类或其他属性来确定它的索引吗？

标签： jquery list

【解决方案1】：

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

var $all_lis = $('li');

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

Demo

第一项将给出0，最后一项将给出8（即第9项）。

【讨论】：

这确实有效。但是，我也将 lis 用于我的导航栏和标题上的其他图像，因此此列表中的索引以数字 20 开头。有没有办法将此 lis 的起始索引强制为 0 或 1？因此，如果我需要更改标题中的其他列表，我也不会更改 jquery 代码。非常感谢杰克
@SaintDee 然后你应该锚定选择器，即$all_lis = $('#some_id li')。

【解决方案2】：

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

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

【讨论】：

不，OP 想要获得按下的<li> 的连续索引，即最后一项应该是索引 8（第 9 项）。

【解决方案3】：

回调函数里面的this就是你想要的，被点击的item。

【讨论】：

我认为 OP 知道这一点 :) 它是关于找出项目列表中的位置。