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

假设我有这个标记：

<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”的。

$("#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/

另一种方式

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

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