Dapatkan indeks elemen sebagai anak relatif terhadap orangtua

Katakanlah saya memiliki markup ini:

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

Dan saya punya jQuery ini:

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

Bagaimana saya bisa mendapatkan indeks anak lirelatif terhadap orang tuanya, ketika mengklik itu li?

Misalnya, ketika Anda mengklik "Langkah 1", tanda alert"0" akan muncul.

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

Namun daripada melampirkan satu penangan klik untuk setiap item daftar lebih baik (kinerja bijaksana) untuk menggunakan delegateyang akan terlihat seperti ini:

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

Di jQuery 1.7+, Anda harus menggunakan on. Contoh di bawah ini mengikat acara ke #wizardelemen, bekerja seperti acara delegasi:

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

sesuatu seperti:

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

Lihatlah contoh ini .

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

Tidak perlu memerlukan perpustakaan besar seperti jQuery untuk mencapai ini, jika Anda tidak mau. Untuk mencapai hal ini dengan manipulasi DOM bawaan, dapatkan koleksi lisaudara kandung dalam array, dan saat klik, periksa indexOfelemen yang diklik di dalam array itu.

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>

Atau, dengan delegasi acara:

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>

Atau, jika elemen anak dapat berubah secara dinamis (seperti dengan daftar todo), maka Anda harus membuat array lis pada setiap klik, daripada sebelumnya:

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>

Delegasi dan Langsung mudah digunakan tetapi jika Anda tidak akan memiliki li: ditambahkan secara dinamis, Anda dapat menggunakan delagasi acara dengan bind / klik normal juga. Seharusnya ada beberapa peningkatan kinerja menggunakan metode ini karena DOM tidak harus dimonitor untuk elemen pencocokan baru. Belum punya angka sebenarnya tetapi masuk akal :)

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

Anda dapat mengujinya di jsFiddle: http://jsfiddle.net/jimmysv/4Sfdh/1/

Namun cara lain

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

Demo https://jsfiddle.net/m9xge3f5/