获取作为子元素的元素相对于父元素的索引

假设我有这样一个标记:

<ul id="wizard">
<li>Step 1</li>
<li>Step 2</li>
</ul>

我有这个 jQuery:

$("#wizard li").click(function () {
// alert index of li relative to ul parent
});

当单击子 li时，如何获得子 li相对于其父 li的索引？

例如，当您单击“第1步”时，应该弹出一个“0”的 alert。

197837 次浏览
小开
最佳答案 
$("#wizard li").click(function () {
console.log( $(this).index() );
});

然而，与其为每个列表项附加一个单击处理程序，还不如使用 delegate(性能方面) ，如下所示:

$("#wizard").delegate('li', 'click', function () {
console.log( $(this).index() );
});

在 jQuery 1.7 + 中，应该使用 on。下面的示例将事件绑定到 #wizard元素，工作方式类似于委托事件:

$("#wizard").on("click", "li", function() {
console.log( $(this).index() );
});
小开

委托和 Live 很容易使用，但是如果你不想动态添加更多的 li: s，你也可以使用普通的 bind/click 事件委托。使用这种方法应该可以提高性能，因为不必监视 DOM 以获得新的匹配元素。没有任何实际的数字，但它是有意义的:)

$("#wizard").click(function (e) {
var source = $(e.target);
if(source.is("li")){
// alert index of li relative to ul parent
alert(source.index());
}
});

您可以在 jsFiddle: http://jsfiddle.net/jimmysv/4Sfdh/1/上测试它

小开

比如:

$("ul#wizard li").click(function () {
var index = $("ul#wizard li").index(this);
alert("index is: " + index)
});
小开

看看这个 例子。

$("#wizard li").click(function () {
alert($(this).index()); // alert index of li relative to ul parent
});
小开

还有另一种方式

$("#wizard li").click(function ()
{
$($(this),'#wizard"').index();
});

演示 Https://jsfiddle.net/m9xge3f5/

小开

如果您不愿意的话，不需要使用像 jQuery 这样的大型库来实现这一点。为了通过内置的 DOM 操作来实现这一点，获得一个数组中 li兄弟元素的集合，然后单击，检查该数组中的单击元素 indexOf。

const lis = [...document.querySelectorAll('#wizard > li')];
lis.forEach((li) => {
li.addEventListener('click', () => {
const index = lis.indexOf(li);
console.log(index);
});
});
<ul id="wizard">
<li>Step 1</li>
<li>Step 2</li>
</ul>

或者，在活动授权下:

const lis = [...document.querySelectorAll('#wizard li')];
document.querySelector('#wizard').addEventListener('click', ({ target }) => {
// Make sure the clicked element is a <li> which is a child of wizard:
if (!target.matches('#wizard > li')) return;
  

const index = lis.indexOf(target);
console.log(index);
});
<ul id="wizard">
<li>Step 1</li>
<li>Step 2</li>
</ul>

或者，如果子元素可能会动态更改(比如 todo 列表) ，那么您必须在每次单击时构建 li数组，而不是事先构建:

const wizard = document.querySelector('#wizard');
wizard.addEventListener('click', ({ target }) => {
// Make sure the clicked element is a <li>
if (!target.matches('li')) return;
  

const lis = [...wizard.children];
const index = lis.indexOf(target);
console.log(index);
});
<ul id="wizard">
<li>Step 1</li>
<li>Step 2</li>
</ul>


提交答案