假设我有这个标记：
<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？
例如，当您单击“第 1 步”时，alert应该会弹出一个带有“0”的字样。
获取元素的索引作为相对于父元素的子元素
IT技术
javascript
jquery
2021-01-19 03:58:48
6个回答
$("#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() );
});
就像是：
$("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
});
如果您不想，则不需要像 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>或者，如果子元素可能会动态更改（例如使用待办事项列表），那么您必须li在每次单击时构建s数组，而不是事先构建：
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>Delegate 和 Live 很容易使用，但如果您不再动态添加 li:s，您也可以使用事件延迟和普通的绑定/点击。使用此方法应该会有一些性能提升，因为不必监视 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/