Как получить порядковый номер элемента с помощью JQuery относительно определенного родителя?

Question

[andand44]

В примере есть некоторое количество изображений с разными родителями. Нужно получить порядковый номер изображения относительно основного родителя .parent
Стандартная функция JQuery считает индекс только прямого родителя.

<div class="parent">
  <div class="parent-section">
    <div class="parent-img">
      <div class="parent-img-item">
        <img src="https://via.placeholder.com/150?text=img1" alt="">
      </div>
      <div class="parent-img-item">
        <img src="https://via.placeholder.com/140?text=img2" alt="">
      </div>
      <div class="parent-img-item">
        <img src="https://via.placeholder.com/160?text=img3" alt="">
      </div>
      
    </div>
    <div class="parent-text">
      Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dolores minus eligendi nihil. Quisquam error sequi, quas facere vitae ut dolore nesciunt aspernatur voluptas? Aperiam est cumque, quo quibusdam quos asperiores!
    </div>
  </div>

  <div class="parent-section">
    <div class="parent-img">
      <div class="parent-img-item">
        <img src="https://via.placeholder.com/150?text=img4" alt="">
      </div>
      
      <div class="parent-img-item">
        <img src="https://via.placeholder.com/140?text=img5" alt="">
      </div>
    </div>
    <div class="parent-text">
      Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dolores minus eligendi nihil. Quisquam error sequi, quas facere vitae ut dolore nesciunt aspernatur voluptas? Aperiam est cumque, quo quibusdam quos asperiores!
    </div>
    <div class="parent-img">
      <div class="parent-img-item">
        <img src="https://via.placeholder.com/150?text=img6" alt="">
      </div>
      
      <div class="parent-img-item">
        <img src="https://via.placeholder.com/140?text=img7" alt="">
      </div>
    </div>
  </div>

  <div class="parent-section">

    <div class="parent-text">
      Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dolores minus eligendi nihil. Quisquam error sequi, quas facere vitae ut dolore nesciunt aspernatur voluptas? Aperiam est cumque, quo quibusdam quos asperiores!
    </div>
    <div class="parent-img">
      <div class="parent-img-item">
        <img src="https://via.placeholder.com/150?text=img8" alt="">
      </div>
      <div class="parent-img-item">
        <img src="https://via.placeholder.com/140?text=img9" alt="">
      </div>
      
    </div>
  </div>

</div>

$(document).ready(function () {
  $("body").on("click", ".parent-img-item", function () {
    let imgIndex = $(this).index();
    console.log(imgIndex);
  });
});

Пример на Codepen
https://codepen.io/andand44/pen/YzVZppo

Answer 1

[YavaDev]

$(document).ready(function () {
  $("body").on("click", ".parent-img-item", function () {
    const parent = $(this).parents('.parent');
    const imageList = parent.find('.parent-img-item');
    const index = imageList.index($(this));
    console.log('index', index);
  });
});