Obter índice do elemento como filho em relação ao pai

Digamos que eu tenho essa marcação:

<ul id="wizard">
    <li>Step 1</li>
    <li>Step 2</li>
</ul>

E eu tenho esse jQuery:

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

Como posso obter o índice do filho em lirelação ao pai, ao clicar nele li?

Por exemplo, quando você clica em "Etapa 1", um alertcom "0" deve aparecer.

$("#wizard li").click(function () {
    console.log( $(this).index() );
});

No entanto, em vez de anexar um manipulador de clique para cada item da lista, é melhor (em termos de desempenho) usar o delegateseguinte:

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

No jQuery 1.7+, você deve usar on. O exemplo abaixo vincula o evento ao #wizardelemento, trabalhando como um evento delegado:

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

algo como:

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

Dê uma olhada neste exemplo .

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

Não é necessário exigir uma grande biblioteca como o jQuery para fazer isso, se você não quiser. Para conseguir isso com a manipulação interna do DOM, obtenha uma coleção dos liirmãos em uma matriz e, ao clicar, verifique o indexOfelemento clicado nessa matriz.

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>

Ou, com delegação de eventos:

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>

Ou, se os elementos filhos puderem mudar dinamicamente (como em uma lista de tarefas), você precisará construir a matriz de lis a cada clique, e não antes:

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 e Live são fáceis de usar, mas se você não tiver mais li: s adicionados dinamicamente, também poderá usar a delagação de eventos com ligação / clique normal. Deve haver algum ganho de desempenho usando esse método, pois o DOM não precisará ser monitorado para novos elementos correspondentes. Não tenho números reais, mas faz sentido :)

$("#wizard").click(function (e) {
    var source = $(e.target);
    if(source.is("li")){
        // alert index of li relative to ul parent
        alert(source.index());
    }
});

Você pode testá-lo em jsFiddle: http://jsfiddle.net/jimmysv/4Sfdh/1/

Ainda outra maneira

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

Demo https://jsfiddle.net/m9xge3f5/