找到元素索引

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类的索引;如果用户点击第二个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

Answer 2

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

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

<强>声明

除了.ContentClass之外还有其他兄弟姐妹，这不起作用。为此你应该参考Joy的answer。

Answer 3

你的父（）。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'元素的数组索引。