รับดัชนีองค์ประกอบเป็นลูกที่สัมพันธ์กับพาเรนต์

สมมติว่าฉันมีมาร์กอัปนี้:

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

และฉันมี jQuery นี้:

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

ฉันจะรับดัชนีของเด็กที่liเกี่ยวข้องกับผู้ปกครองของมันได้อย่างไรเมื่อคลิกที่li?

ตัวอย่างเช่นเมื่อคุณคลิก "ขั้นตอนที่ 1" เครื่องหมายalert"0" จะปรากฏขึ้น

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

อย่างไรก็ตามแทนที่จะแนบ handler คลิกเดียวสำหรับแต่ละรายการมันจะดีกว่า (ประสิทธิภาพฉลาด) การใช้delegateซึ่งจะมีลักษณะเช่นนี้:

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

ใน jQuery 1.7+ onคุณควรใช้ ตัวอย่างด้านล่างเชื่อมเหตุการณ์กับ#wizardองค์ประกอบทำงานเหมือนเหตุการณ์ตัวแทน:

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

สิ่งที่ต้องการ:

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

ลองดูตัวอย่างนี้

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

ไม่จำเป็นต้องใช้ไลบรารีขนาดใหญ่เช่น jQuery เพื่อทำสิ่งนี้ให้สำเร็จหากคุณไม่ต้องการ เพื่อให้บรรลุสิ่งนี้ด้วยการจัดการ DOM ในตัวรับชุดliพี่น้องในอาร์เรย์และเมื่อคลิกตรวจสอบindexOfองค์ประกอบคลิกในอาร์เรย์นั้น

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>

หรือด้วยการมอบหมายกิจกรรม:

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>

หรือหากองค์ประกอบย่อยอาจเปลี่ยนแปลงแบบไดนามิก (เช่นเดียวกับรายการสิ่งที่ต้องทำ) คุณจะต้องสร้างอาร์เรย์ของlis ในการคลิกทุกครั้งแทนที่จะเป็นล่วงหน้า:

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>

ผู้ได้รับมอบหมายและ Live นั้นใช้งานง่าย แต่หากคุณไม่ได้เพิ่ม li: s แบบไดนามิกคุณสามารถใช้การแจกแจงเหตุการณ์ด้วยการผูก / คลิกปกติเช่นกัน ควรมีการเพิ่มประสิทธิภาพบางอย่างโดยใช้วิธีนี้เนื่องจาก DOM จะไม่ได้รับการตรวจสอบสำหรับองค์ประกอบการจับคู่ใหม่ ยังไม่ได้รับตัวเลขจริง แต่มันก็สมเหตุสมผล :)

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

คุณสามารถทดสอบได้ที่ jsFiddle: http://jsfiddle.net/jimmysv/4Sfdh/1/

อีกวิธีหนึ่ง

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

สาธิต https://jsfiddle.net/m9xge3f5/