某個類的元素的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是here。

謝謝。

Answer 1

注意index()具有可選元件arguement：

.index(element)

元件

類型：元或jQuery的DOM中 jQuery對象尋找內元件或第一元件。

因此，在這種情況下，你可以使用jusr作爲this這樣的說法：

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

jsFiddle here.

Answer 2

你點擊.MyClass元素，所以只是檢查的this指數有關選擇傳遞給index()，在這種情況下.MyClass：

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

FIDDLE

從 docs

的.index（選擇器）

表示一個jQuery集合，其中尋找一個 元件的選擇器。