jquery - 查找元素的索引

Question

我有一些像这样的 HTML:

<div class="TopClass">

  <div class="ContentClass">
    <div class="ActionClass">action</div>
  </div> 

  <div class="ContentClass">
    <div class="ActionClass">action</div>
  </div> 

  <div class="ContentClass">
    <div class="ActionClass">action</div>
  </div> 

</div>

我正在寻找相对于 TopClass 的操作类的索引；如果用户单击第二个 Action 类，则应返回 2。

$('.ActionClass').click(function () {
    alert($(this).parent().parent().index());  // not working    
});

Answer 1

使用.index像这样，即使结构发生变化，它也会始终为您提供 .ActionClass 的索引。但当 .index 返回 0-based 索引时，我将 1 添加到它的输出中:

$('.ActionClass').click(function () {
   alert($(this).closest('.TopClass').find('.ActionClass').index(this) + 1);
});​

Working Fiddle

另一种更短的方法可以像这样，到目前为止它只适用于一个父 .TopClass 容器，但如果您有不同的结构，请小心使用。前一种更安全，适用于一般情况

$('.ActionClass').click(function () {
   alert($('.ActionClass').index(this) + 1);
});​

Working Fiddle