Javascript 获取元素的索引作为相对于父元素的子元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4996002/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Get index of element as child relative to parent
提问by AgileMeansDoAsLittleAsPossible
Let's say I have this markup:
假设我有这个标记：
<ul id="wizard">
<li>Step 1</li>
<li>Step 2</li>
</ul>
And I have this jQuery:
我有这个 jQuery：
$("#wizard li").click(function () {
// alert index of li relative to ul parent
});
How can I get the index of the child lirelative to it's parent, when clicking that li?
li单击时如何获取子项相对于其父项的索引li？
For example, when you click "Step 1", an alertwith "0" should pop up.
例如，当您单击“步骤 1”时，alert应该会弹出一个带有“0”的字样。
回答by redsquare
$("#wizard li").click(function () {
console.log( $(this).index() );
});
However rather than attaching one click handler for each list item it is better (performance wise) to use delegatewhich would look like this:
但是，与其为每个列表项附加一个单击处理程序，不如使用delegate如下所示的更好（性能方面）：
$("#wizard").delegate('li', 'click', function () {
console.log( $(this).index() );
});
In jQuery 1.7+, you should use on. The below example binds the event to the #wizardelement, working like a delegate event:
在 jQuery 1.7+ 中，您应该使用on. 下面的示例将事件绑定到#wizard元素，就像委托事件一样工作：
$("#wizard").on("click", "li", function() {
console.log( $(this).index() );
});
回答by Mash
something like:
就像是：
$("ul#wizard li").click(function () {
var index = $("ul#wizard li").index(this);
alert("index is: " + index)
});
回答by Kimtho6
回答by h0mayun
Yet another way
又一种方式
$("#wizard li").click(function ()
{
$($(this),'#wizard"').index();
});
回答by CertainPerformance
There's no need to require a big library like jQuery to accomplish this, if you don't want to. To achieve this with built-in DOM manipulation, get a collection of the lisiblings in an array, and on click, check the indexOfthe clicked element in that array.
如果您不想，则不需要像 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>Or, with event delegation:
或者，使用事件委托：
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>Or, if the child elements may change dynamically (like with a todo list), then you'll have to construct the array of lis on every click, rather than beforehand:
或者，如果子元素可能会动态更改（例如使用待办事项列表），那么您必须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>回答by jimmystormig
Delegate and Live are easy to use but if you won't have any more li:s added dynamically you could use event delagation with normal bind/click as well. There should be some performance gain using this method since the DOM won't have to be monitored for new matching elements. Haven't got any actual numbers but it makes sense :)
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());
}
});
You could test it at jsFiddle: http://jsfiddle.net/jimmysv/4Sfdh/1/
你可以在 jsFiddle 测试它：http: //jsfiddle.net/jimmysv/4Sfdh/1/
