Ruft den Index des Elements als untergeordnetes Element relativ zum übergeordneten Element ab

Angenommen, ich habe dieses Markup:

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

Und ich habe diese jQuery:

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

Wie kann ich den Index des Kindes lirelativ zum Elternteil erhalten, wenn ich darauf klicke li?

Wenn Sie beispielsweise auf "Schritt 1" klicken, sollte ein alertmit "0" angezeigt werden.

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

Anstatt jedoch einen Klick-Handler für jedes Listenelement anzuhängen, ist es besser (leistungsmäßig), Folgendes zu verwenden delegate:

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

In jQuery 1.7+ sollten Sie verwenden on. Das folgende Beispiel bindet das Ereignis an das #wizardElement und funktioniert wie ein Delegatenereignis:

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

etwas wie:

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

Schauen Sie sich dieses Beispiel an .

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

Es ist nicht erforderlich, eine große Bibliothek wie jQuery zu benötigen, um dies zu erreichen, wenn Sie dies nicht möchten. Um dies mit der integrierten DOM-Manipulation zu erreichen, rufen Sie eine Sammlung der liGeschwister in einem Array ab und überprüfen Sie beim Klicken indexOfdas angeklickte Element in diesem 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>

Oder mit Veranstaltungsdelegation:

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>

Wenn sich die untergeordneten Elemente dynamisch ändern (wie bei einer Aufgabenliste), müssen Sie das Array von lis bei jedem Klick erstellen und nicht vorher:

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 und Live sind einfach zu verwenden, aber wenn Sie keine dynamischen Li: s mehr hinzufügen möchten, können Sie die Ereignisverzögerung auch mit normalem Binden / Klicken verwenden. Mit dieser Methode sollte ein gewisser Leistungsgewinn erzielt werden, da das DOM nicht auf neue übereinstimmende Elemente überwacht werden muss. Ich habe keine tatsächlichen Zahlen, aber es macht Sinn :)

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

Sie können es unter jsFiddle testen: http://jsfiddle.net/jimmysv/4Sfdh/1/

Noch ein anderer Weg

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

Demo https://jsfiddle.net/m9xge3f5/