Ottieni l'indice dell'elemento come figlio rispetto al genitore

Diciamo che ho questo markup:

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

E ho questo jQuery:

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

Come posso ottenere l'indice del figlio lirispetto al suo genitore, quando faccio clic su quello li?

Ad esempio, quando si fa clic su "Passaggio 1", alertdovrebbe essere visualizzato uno con "0".

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

Tuttavia, anziché collegare un gestore di clic per ciascun elemento dell'elenco, è preferibile (per quanto riguarda le prestazioni) utilizzare delegatecome sarebbe:

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

In jQuery 1.7+, è necessario utilizzare on. L'esempio seguente associa l'evento #wizardall'elemento, funzionando come un evento delegato:

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

qualcosa di simile a:

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

Dai un'occhiata a questo esempio .

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

Non è necessario richiedere una grande libreria come jQuery per farlo, se non lo si desidera. Per ottenere ciò con la manipolazione DOM integrata, ottenere una raccolta di lifratelli in un array e, al clic, controllare l' indexOfelemento cliccato in tale array.

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>

Oppure, con la delega dell'evento:

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>

Oppure, se gli elementi figlio possono cambiare dinamicamente (come con una lista di cose da fare), allora dovrai costruire la matrice di lis su ogni clic, piuttosto che in anticipo:

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 sono facili da usare ma se non hai più li: s aggiunti dinamicamente puoi usare anche la delagazione di eventi con il bind / click normale. Dovrebbe esserci un certo miglioramento delle prestazioni usando questo metodo poiché il DOM non dovrà essere monitorato per nuovi elementi corrispondenti. Non ho numeri reali ma ha senso :)

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

Puoi provarlo su jsFiddle: http://jsfiddle.net/jimmysv/4Sfdh/1/

Ancora un altro modo

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

Demo https://jsfiddle.net/m9xge3f5/