Получить индекс элемента как дочернего по отношению к родительскому

Скажем, у меня есть эта разметка:

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

Ответ 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() );
});

Ответ 2

что-то вроде:

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

Ответ 3

Взгляните на этот пример.

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

Ответ 4

Делегировать и жить просты в использовании, но если у вас больше не будет li: s добавлено динамически, вы можете использовать eventagalation с нормальным bind/click. При использовании этого метода должно быть некоторое усиление производительности, поскольку 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/

Ответ 5

Еще один способ

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

Демо https://jsfiddle.net/m9xge3f5/

Ответ 6

Для этого не требуется большая библиотека, такая как jQuery, если вы этого не хотите. Для достижения этой цели со встроенной манипуляции DOM, получить коллекцию li братьев и сестер в массиве, и по щелчку, проверка функции indexOf на Clicked элемент в этом массиве.

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>