Obtener el índice del elemento como hijo en relación con el padre

Digamos que tengo este marcado:

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

Y tengo este jQuery:

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

¿Cómo puedo obtener el índice del niño en lirelación con su padre, al hacer clic en eso li?

Por ejemplo, cuando hace clic en "Paso 1", alertdebería aparecer un con "0".

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

Sin embargo, en lugar de adjuntar un controlador de clic para cada elemento de la lista, es mejor (en cuanto al rendimiento) usar el delegateque se vería así:

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

En jQuery 1.7+, debe usar on. El siguiente ejemplo vincula el evento al #wizardelemento, funcionando como un 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)
});

Echa un vistazo a este ejemplo .

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

No es necesario requerir una gran biblioteca como jQuery para lograr esto, si no lo desea. Para lograr esto con la manipulación DOM incorporada, obtenga una colección de los lihermanos en una matriz y, al hacer clic, verifique el indexOfelemento cliqueado en esa 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>

O, con la delegación del 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>

O, si los elementos secundarios pueden cambiar dinámicamente (como con una lista de tareas pendientes), entonces tendrá que construir la matriz de lis con cada clic, en lugar de 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 y Live son fáciles de usar, pero si no tiene más li: s agregados dinámicamente, también puede usar la demora de eventos con enlace / clic normal. Debería haber alguna ganancia de rendimiento con este método ya que el DOM no tendrá que ser monitoreado para detectar nuevos elementos coincidentes. No tengo ningún número real pero tiene sentido :)

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

Puede probarlo en jsFiddle: http://jsfiddle.net/jimmysv/4Sfdh/1/

Otra forma

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

Demo https://jsfiddle.net/m9xge3f5/