查找元素的索引答案

【问题标题】：finding index of element查找元素的索引
【发布时间】：2012-06-04 09:43:56
【问题描述】：

我有一些这样的 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    
});

【问题讨论】：

标签： jquery

【解决方案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

【讨论】：

好的，谢谢；像我需要的那样工作。 HTML 实际上具有介于两者之间的类，因此您的解决方案会考虑到这一点。见这里：jsfiddle.net/AhReg/2
另一种更短的方式可以是 jsfiddle.net/joycse06/g5mVx/5 ，不确定它是否适用于所有情况。但似乎会。
@Joy: this 是.ActionClass 所以你也可以只做$('.ActionClass').index(this)。

【解决方案2】：

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

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

免责声明

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

【讨论】：

这不起作用。如果您在两者之间添加类，则该数字是关闭的。在这里查看 jsfiddle.net/AhReg/2
我有点同意，但我确实指定了元素的索引，Joy 的解决方案就像我需要的那样工作。我理解你的逻辑想法，因为那是我被 .parent() 函数困住的地方，那是行不通的。为努力而投票；谢谢。

【解决方案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    
});

【讨论】：

这不起作用。如果您在两者之间添加类，则该数字是关闭的。在这里查看jsfiddle.net/AhReg/2

【解决方案4】：

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

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

【讨论】：