Ebeveyne göre öğenin dizinini alt öğe olarak alma

Diyelim ki bu işaretlemem var:

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

Ve bu jQuery var:

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

Tıklarken çocuğun dizinini liebeveynine göre nasıl alabilirim li?

Örneğin, "Adım 1" i tıkladığınızda, alert"0" ile bir açılır.

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

Ancak, her bir liste öğesi için bir tıklama işleyicisi eklemek yerine, aşağıdaki delegategibi kullanmak daha iyidir (performans açısından) :

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

JQuery 1.7+ sürümünde kullanmalısınız on. Aşağıdaki örnek, olayı #wizardbir temsilci olayı gibi çalışarak öğeye bağlar :

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

gibi bir şey:

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

Bu örneğe bir göz atın .

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

Bunu yapmak istemiyorsanız jQuery gibi büyük bir kütüphaneye gerek yoktur. Bunu yerleşik DOM manipülasyonu ile başarmak için li, bir dizideki kardeşlerin bir koleksiyonunu alın indexOfve tıkladığınızda o dizideki tıklanan öğeyi kontrol edin .

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>

Veya etkinlik heyeti ile:

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>

Veya, alt öğeler dinamik olarak değişebilirse (yapılacaklar listelerinde olduğu gibi), liönceden değil, her tıklamada s dizisini oluşturmanız gerekir :

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>

Delege ve Live'ın kullanımı kolaydır, ancak dinamik olarak eklenmiş başka li'leriniz olmayacaksa, normal bağlama / tıklama ile olay gecikmesini de kullanabilirsiniz. DOM'un yeni eşleşen öğeler için izlenmesi gerekmeyeceğinden, bu yöntemi kullanırken bir miktar performans kazancı olmalıdır. Gerçek sayıları yok ama mantıklı :)

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

JsFiddle'da test edebilirsiniz: http://jsfiddle.net/jimmysv/4Sfdh/1/

Yine başka bir yol

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

Demo https://jsfiddle.net/m9xge3f5/