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);
});​

工作小提琴

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

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

工作小提琴

Answer 2

您的代码几乎是正确的，只需从父节点获取索引：

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

​<strong>免责声明

当除了 之外还有其他兄弟姐妹时，这不起作用.ContentClass。为此，您应该参考乔伊的回答。

Answer 3

你的 parent().parent() 在结构中把你带得太高了：

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

会起作用，但它是基于零的，因此您将获得 0、1 和 2 三个 div 点击。

http://jsfiddle.net/amelvin/AhReg/

编辑

根据您的修改，您可以在 index() 方法上使用可选的选择器变量。

<div class="TopClass">

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

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

  <div class="test"></div>
  <div class="test"></div>  
  <div class="test"></div>
  <div class="test"></div>  
  <div class="test"></div>
  <div class="test"></div>  

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

</div>​

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

Answer 4

$index = jQuery.inArray($(this)[0], $('.ActionClass')) + 1

无论 HTML 结构如何，此解决方案都将起作用。它在包含所有匹配的“.ActionClass”元素的数组中找到单击的“.ActionClass”元素的数组索引。