JQuery найти все элементы с классом и вернуть позицию счетчика элемента, по которому щелкнули

Question

Я не ищу $(this).index() в качестве вашей информации. Итак, у меня есть два тега <ul> с тегами <li> внутри. Я хочу знать, на какую <ul> была нажата и какая <li> была нажата. Например, что-то вроде ul 0 и li 3. Так что, если на странице есть 10 <ul> тегов, я хочу посмотреть только те, которые имеют класс list для кликов.

jQuery Example, который не будетработать на то, что я хочу:

$('ul').click(function(event) {
  alert($(this).index());
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="list">
  <li>Test</li>
  <li>Test</li>
  <li>Test</li>
  <li>Test</li>
  <li>Test</li>
</ul>
<hr />
<ul class="list">
  <li>Test</li>
  <li>Test</li>
  <li>Test</li>
  <li>Test</li>
  <li>Test</li>
</ul>

Требуемый результат выбранного элемента: UL # и LI #. Как UL0 LI3, UL1 LI3 и т. Д. ...

JSFiddle: http://jsfiddle.net/cg3a8d6n/

Answer 1

Вы можете использовать событие click для элемента li, а затем получить его индекс, а также индекс его родителя, который равен ul. Вы также можете указать селектор в методе index, чтобы рассматривать только определенные элементы, которые соответствуют селектору.

$('ul.list li').click(function(event) {
  const li = $(this).index();
  const ul = $(this).parent().index('ul.list');
  console.log(`ul: ${ul} li: ${li}`)
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="list">
  <li>Test</li>
  <li>Test</li>
  <li>Test</li>
  <li>Test</li>
  <li>Test</li>
</ul>
<hr />
<ul></ul>
<ul></ul>
<ul class="list">
  <li>Test</li>
  <li>Test</li>
  <li>Test</li>
  <li>Test</li>
  <li>Test</li>
</ul>