Obtenir l'index de l'élément en tant qu'enfant par rapport au parent

Disons que j'ai ce balisage:

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

Et j'ai ce jQuery:

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

Comment puis-je obtenir l'index de l'enfant par lirapport à son parent, en cliquant dessus li?

Par exemple, lorsque vous cliquez sur «Étape 1», un alertavec «0» devrait apparaître.

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

Cependant, plutôt que d'attacher un gestionnaire de clic pour chaque élément de liste, il est préférable (en termes de performances) d'utiliser delegatece qui ressemblerait à ceci:

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

Dans jQuery 1.7+, vous devez utiliser on. L'exemple ci-dessous lie l'événement à l' #wizardélément, fonctionnant comme un événement délégué:

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

quelque chose comme:

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

Jetez un œil à cet exemple .

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

Il n'est pas nécessaire d'avoir besoin d'une grande bibliothèque comme jQuery pour accomplir cela, si vous ne le souhaitez pas. Pour y parvenir avec la manipulation DOM intégrée, obtenez une collection des lifrères et sœurs dans un tableau et, en cliquant, vérifiez l' indexOfélément cliqué dans ce tableau.

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, avec délégation événementielle:

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, si les éléments enfants peuvent changer dynamiquement (comme avec une liste de tâches), vous devrez alors construire le tableau de lis à chaque clic, plutôt qu'au préalable:

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 et Live sont faciles à utiliser mais si vous n'avez plus de li: s ajoutés dynamiquement, vous pouvez également utiliser la délagation d'événement avec un lien / clic normal. Il devrait y avoir un gain de performances en utilisant cette méthode car le DOM n'aura pas à être surveillé pour de nouveaux éléments correspondants. Je n'ai pas de chiffres réels mais c'est logique :)

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

Vous pouvez le tester sur jsFiddle: http://jsfiddle.net/jimmysv/4Sfdh/1/

Encore une autre façon

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

Démo https://jsfiddle.net/m9xge3f5/