Отримайте індекс елемента як дочірнього відносно батьківського

Скажімо, у мене є така розмітка:

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

Або, якщо дочірні елементи можуть динамічно змінюватися (як, наприклад, зі списком todo), вам доведеться побудувати масив lis на кожному клацанні, а не заздалегідь:

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/