как получить индекс элемента в массиве выбора?

Question

Мне нужно получить index из нескольких элементов, относящихся к их родителю ol. В приведенном ниже коде я думаю, что он должен дать мне тот же индекс для комментариев и тегов, как и в том же <ol>, но не не происходит.

$('#main-form').find('form').each(function () { //foreach form in the ol tag
    var $drop_target_index = $('.drop_targets').index($(this).closest('.drop_targets'));
    console.log($(this).closest('.drop_targets'));
    console.log( $drop_target_index);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="main-form">
        <ol class="drop_targets">
            <li><ol class="drop_targets comments">
                <li><form></form>
    
                Item 1 </li>
            </ol>
            <ol class="drop_targets tags">
                <li><form></form>
                Item 2</li>
            </ol></li>
        </ol>
    </div>

Я ожидал 0 0 я получил 0 1

Answer 1

Используйте each() с вашим .drop_targets.

$('.drop_targets .drop_targets').each(function () {
  var $drop_target_index = $(this).parent().index() + 1;
  console.log($drop_target_index);
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="main-form">
    <ol class="drop_targets">
        <ol class="drop_targets comments">
            <form></form>
            <form></form>
            <form></form>

            Item 1
        </ol>
        <ol class="drop_targets tags">
            <form></form>
            <form></form>
            <form></form>
            Item 2
        </ol>
    </ol>
</div>

Answer 2

Потому что вы используете то же имя класса, вот пример для изменения второго <ol> класса для получения индекса.

<div id="main-form">
<ol class="drop_targets">
    <ol class="drop_targets1 comments">
        <form></form>
        <form></form>
        <form></form>

        Item 1
    </ol>
    <ol class="drop_targets1 tags">
        <form></form>
        <form></form>
        <form></form>
        Item 2
    </ol>
</ol>

$('#main-form').find('form').each(function (i,e) { 
console.log($('.drop_targets1').index($(e).closest('.drop_targets1')));
});

другому решению не нужноизменить название класса

    $('#main-form').find('form').each(function (i,e) { 
        console.log($($('.drop_targets')[0]).find('.drop_targets').index($(e).closest('.drop_targets')));
    });