jquery某类元素索引

我在容器内有某个类的多个元素，我想获取该特定元素的索引。假设我有这样的 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 是here.

Thanks.

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

.index( element )

element

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

所以在这种情况下，你可以使用this正如该论点：

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

JSF 在这里。