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

Question

假设我有这个标记:

<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".

Answer 1

$("#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() );
});

Answer 2

就像是:

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

Answer 3

看看这个例子.

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

Answer 4

如果您不想，则不需要像 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>