Найти общий индекс элемента в jQuery

Question

Пожалуйста, помогите мне, как получить индекс элемента, который находится в разных группах тегов. Я хочу получить индекс этого тега, который относится к тегу body.

$('.selectthis > .wrapper > p').click(function() {
  // $('.selectthis').length return 3
  var getParentIndex = $(this).closest('.selectthis').index();
  $('.result').text(getParentIndex);
  //How to get index as 3 of tag selecthis when i click on 'text3'
  //When i click on text1 or text3 result is same 0
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="border: 1px solid green; margin: 10px;">
  <div class="selectthis">
    <div class="wrapper">
      <p>
        text1
      </p>
    </div>
  </div>

  <div class="selectthis">
    <divc class="wrapper">
      <p>
        text2
      </p>
  </div>
</div>
</div>

<div style="border: 1px solid blue; margin: 10px;">
  <div class="selectthis">
    <divc class="wrapper">
      <p>
        text3
      </p>
  </div>
</div>

<p class="result">
</p>


</div>

Answer 1

Прямого пути не существует, поскольку родительский элемент каждого selectthis различен. Обходным путем является то, что вы можете получить массив всех selectthis и сравнить его с родительским selectthis нажатого текста.

см. Код ниже

$(function(){
  $('.selectthis > .wrapper > p').click(function() {

  var $selectThisArray = $('.selectthis');
  var getParentIndex = 0;
  var $parentElement = $(this).closest('.selectthis');

  $.each($selectThisArray, function(index, val){
      if($(val).is($parentElement)) {
        getParentIndex = index;
      }
  });
  $('.result').text(getParentIndex);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="border: 1px solid green; margin: 10px;">
  <div class="selectthis">
    <div class="wrapper">
      <p>
        text1
      </p>
    </div>
  </div>

  <div class="selectthis">
    <div class="wrapper">
      <p>
        text2
      </p>
  </div>
</div>
</div>

<div style="border: 1px solid blue; margin: 10px;">
  <div class="selectthis">
    <div class="wrapper">
      <p>
        text3
      </p>
  </div>
</div>

<p class="result">
</p>
</div>

Answer 2

Элементы .selectthis не являются братьями и сестрами, поэтому, чтобы получить их индекс, связанный друг с другом, необходимо предоставить селектор для index(), чтобы найти текущий элемент внутри, например. index('.selectthis')

Также обратите внимание, что индекс элемента начинается с нуля, поэтому третий элемент будет возвращать индекс 2. Таким образом, вам нужно добавить один к значению, чтобы получить желаемый результат. Попробуйте это:

$('.selectthis > .wrapper > p').click(function() {
  var getParentIndex = $(this).closest('.selectthis').index('.selectthis') + 1;
  $('.result').text(getParentIndex);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="border: 1px solid green; margin: 10px;">
  <div class="selectthis">
    <div class="wrapper">
      <p>
        text1
      </p>
    </div>
  </div>
  <div class="selectthis">
    <div class="wrapper">
      <p>
        text2
      </p>
    </div>
  </div>
</div>

<div style="border: 1px solid blue; margin: 10px;">
  <div class="selectthis">
    <divc class="wrapper">
      <p>
        text3
      </p>
  </div>
</div>
<p class="result"></p>
</div>