Получить значение индекса вложенного элемента списка с помощью jQuery

Question

Я пытаюсь получить значение индекса вложенного элемента li, как только я нажму на сам элемент.

Как вы можете видеть на консоли, я мог бы получить значения индекса элементов, которые не вложены правильно, но вложенные из них дают мне 0 или 1 вместо 2 или 3, естественно.

Есть ли способ найти значение индекса li, хотя его внутри другого div в пределах ul?

$('li a').on('click', function() { 
 
    console.log($($(this)["0"].offsetParent).find('li')); 
 
    console.log($(this).parent().index()) 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li><a href="#">Item 0</a></li> 
 
    <li><a href="#">Item 1</a></li> 
 
    <div class="group"> 
 
    <li><a href="#">Item 2</a></li> 
 
    <li><a href="#">Item 3</a></li> 
 
    </div> 
 
    <li><a href="#">Item 4</a></li> 
 
</ul>

Answer 1

Вы используете index() свойство неправильным образом, попробуйте этот код.

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li><a href="#">Item 0</a></li> 
 
    <li><a href="#">Item 1</a></li> 
 
    <div class="group"> 
 
    <li><a href="#">Item 2</a></li> 
 
    <li><a href="#">Item 3</a></li> 
 
    </div> 
 
    <li><a href="#">Item 4</a></li> 
 
</ul>