javascript - jQuery は特定の子要素のインデックスを取得し、他は無視します

Question

子要素のインデックスを取得しようとしていますが、ol必要h2のない が含まれているため、jQueryindex()関数を使用すると結果が汚染されます。

olそのため、 がまったくないかのようにのインデックスが必要h2です。そのため、3 番目をクリックするとol、インデックスは2ではなくになり4ます。

HTML は次のようになります。

<div>
    <h2>Title</h2>
    <ol><li>Item</li><li>Item</li><li>Item</li></ol>
    <h2>Title</h2>
    <ol><li>Item</li><li>Item</li><li>Item</li></ol>
    <h2>Title</h2>
    <ol><li>Item</li><li>Item</li><li>Item</li></ol>
    <h2>Title</h2>
    <ol><li>Item</li><li>Item</li><li>Item</li></ol>
</div>

そしてjQuery：

$('ol li').click(function () {
    // get current index position of the ol
    var itemIndex   = $(this).parent('ol').index();

    alert(itemIndex);
});

Answer 1

よく理解できたら、このコードを試してください

var ol = $('ol');
ol.find('li').click(function () {
    var parentOl  = $(this).parent('ol');
    // get current index position of the ol
    var itemIndex = ol.index(parentOl);
    alert(itemIndex);
});

jsbin の例: http://jsbin.com/enugex/1/edit

Answer 2

jsfiddleでコードを変更します

$('ol li').click(function (item,index) {
    // get current index position of the ol
      var itemIndex   = $(this).parents('div').children('ol').index($(this).parent('ol'));

    alert(itemIndex);
});

Answer 3

これを試して

$(this).parent('ol').parent().children('ol').indexOf($(this).parent('ol'));