親に相対的な子として要素のインデックスを取得します

私がこのマークアップを持っているとしましょう：

<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() );
});

ただし、リストアイテムごとに1つのクリックハンドラーをアタッチするよりも（パフォーマンスに関して）次のように使用する方が適切です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>

または、子要素が（todoリストのように）動的に変化する可能性がある場合liは、事前にではなく、クリックするたびにs の配列を作成する必要があります。

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と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/