Lấy chỉ số của phần tử là con so với cha mẹ

Hãy nói rằng tôi có đánh dấu này:

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

Và tôi có jQuery này:

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

Làm thế nào tôi có thể có được chỉ số của đứa trẻ liso với cha mẹ của nó, khi nhấp vào đó li?

Ví dụ: khi bạn nhấp vào "Bước 1", một alert"0" sẽ bật lên.

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

Tuy nhiên, thay vì đính kèm một trình xử lý nhấp chuột cho mỗi mục danh sách, tốt hơn là sử dụng (hiệu suất khôn ngoan) để sử dụng delegatenhư sau:

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

Trong jQuery 1.7+, bạn nên sử dụng on. Ví dụ dưới đây liên kết sự kiện với thành #wizardphần, hoạt động như một sự kiện dành cho đại biểu:

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

cái gì đó như:

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

Hãy xem ví dụ này .

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

Không cần phải có một thư viện lớn như jQuery để thực hiện điều này, nếu bạn không muốn. Để đạt được điều này với thao tác DOM tích hợp, hãy lấy một tập hợp các lianh chị em trong một mảng và khi nhấp vào, hãy kiểm tra indexOfphần tử được nhấp trong mảng đó.

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>

Hoặc, với đoàn sự kiện:

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>

Hoặc, nếu các phần tử con có thể thay đổi linh hoạt (như với danh sách việc cần làm), thì bạn sẽ phải xây dựng mảng lis trên mỗi lần nhấp, thay vì trước đó:

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 và Live rất dễ sử dụng nhưng nếu bạn không có thêm li: s, bạn có thể sử dụng delagation sự kiện với liên kết / nhấp chuột bình thường. Cần có một số hiệu suất đạt được bằng cách sử dụng phương pháp này vì DOM sẽ không phải được theo dõi đối với các yếu tố phù hợp mới. Không có con số thực tế nào nhưng nó có ý nghĩa :)

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

Bạn có thể kiểm tra nó tại jsFiddle: http://jsfiddle.net/jimmysv/4Sfdh/1/

Một cách khác

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

Bản giới thiệu https://jsfiddle.net/m9xge3f5/