jquery - 某个类的元素的jquery索引

Question

我在容器中有某个类的几个元素，我想获取该特定元素的索引。假设我有这个 HTML：

<div id="TheContainer">

  <div class="MyClass">My Class</div>
  <div class="SomeClass">Not My Class</div>
  <div class="SomeOtherClass">Not My Class</div>
  <div class="SomeClass">Not My Class</div>
  <div class="MyClass">My Class</div>
  <div class="SomeOtherClass">Not My Class</div>
  <div class="SomeClass">Not My Class</div>
  <div class="MyClass">My Class</div>

</div>

我想获取 MyClass 的索引。这是我尝试过的：

$('#TheContainer').on({
    click: function () { 

       console.log($(this).parent().children('.MyClass').index()); }

}, '.MyClass');

因此，例如，如果用户单击第三个 MyClass 元素，它应该控制台2。jsFiddle 在这里。

谢谢。

Answer 1

请注意，index()有一个可选的元素参数：

.index( element )

元素

类型：Element 或 jQuery 要查找的 jQuery 对象中的 DOM 元素或第一个元素。

因此，在这种情况下，您可以只使用this该参数：

$(this).parent().children('.MyClass').index(this);

JSFiddle在这里。

Answer 2

您正在单击.MyClass元素，因此只需检查与this传递给的 selecor 相关的索引index()，在这种情况下.MyClass：

$(document).ready(function () {
    $('#TheContainer').on('click', '.MyClass', function () {
        alert( $(this).index('.MyClass') );
    });
});

小提琴

从文档

.index（选择器）

表示要在其中查找元素的 jQuery 集合的选择器。