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

Question

Disons que j'ai cette balise :

<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 li par rapport à son parent, lorsque l'on clique sur ce dernier. li ?

Par exemple, lorsque vous cliquez sur "Étape 1", une alert avec "0" devrait apparaître.

Answer 1

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

Cependant, plutôt que d'attacher un gestionnaire de clic pour chaque élément de la liste, il est préférable (du point de vue des performances) d'utiliser la fonction delegate 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 au #wizard qui fonctionne comme un événement délégué :

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

Answer 2

Quelque chose comme :

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

Answer 3

Il n'est pas nécessaire d'avoir recours à une grande bibliothèque comme jQuery pour accomplir cette tâche, si vous ne le souhaitez pas. Pour réaliser cela avec la manipulation intégrée du DOM, obtenez une collection de l'élément li dans un tableau, et au moment du clic, vérifiez les éléments suivants indexOf l'é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 la délégation d'événements :

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 dans le cas d'une liste de tâches), vous devrez construire le tableau des éléments suivants li à chaque clic, plutôt qu'à l'avance :

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>

Answer 4

Jetez un coup d'œil à ceci exemple .

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

Answer 5

Delegate et Live sont faciles à utiliser, mais si vous n'avez pas l'intention d'ajouter d'autres li:s de manière dynamique, vous pouvez également utiliser la déliaison d'événements avec un bind/click normal. Il devrait y avoir un gain de performance en utilisant cette méthode puisque le DOM n'aura pas à être surveillé pour les nouveaux éléments correspondants. Je n'ai pas de chiffres précis, 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/