查找Dom節點索引多元素元素的某一類的元素

Question

嗨我有一系列具有多個不同類的標籤。當單擊跨度時，我想返回跨度類的索引。所以不是跨度本身的索引。

下面是一個簡單的html：

<span class='spantype1 party'>text1</span> 
<span class='spantype2 party'>text2</span> 
<span class='spantype1 party'>text3</span> 

所以，如果我點擊文字3我要回1不2。如果我點擊的text1我想返回0。當然，如果我點擊文本2我想回到0

這從here答案不工作，因爲指數爲-1總是返回（因爲有多個類），見my example jsfiddle：

$("span").click(function() { 
    var index = $('.' + $(this).attr('class')).index($(this)); 
    alert(index); 
}); 

Answer 1

我會使用一個過濾器來抓住你感興趣的類，並且基於搜索：

$("span").click(function() { 
    var spanType = $.grep(this.classList, function (className) { 
     return /^spantype/.test(className); 
    })[0]; 

    var index = $('.' + spanType).index($(this)); 
    alert(index); 
}); 

我用classList以上，但爲了更好的支持（見caniuse.com），你很可能className代替：

$("span").click(function() { 
    var spanType = $.grep(this.className.split(/\s+/), function (className) { 
     return /^spantype/.test(className); 
    })[0]; 

    var index = $('.' + spanType).index($(this)); 
    alert(index); 
});