[解決済み] 親要素を基準とした子要素のインデックスを取得する

質問

例えば、こんなマークアップがあるとします。

<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 という文字列がポップアップ表示されるはずです。

解決方法は？

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