javascript - 在jQuery中查找元素的整体索引

Question

请帮助我如何获取位于不同标签组中的元素的索引。我想获取该标签相对于正文标签的索引。

$('.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>