jquery - 控制 jQuery 的 index() 函数的范围

Question

我这个：http: //jsfiddle.net/ZP76c/

我试图控制 jQuery 根据 index() 选择元素的范围，可能吗？

<div class="holder">
    <div class="first">First</div>
    <div class="second">Second</div>
    <div class="first">First</div>
    <div class="second">Second</div>
</div>​

$('.holder div').click(function(){
     alert($(this).index());            
});

// desired behaviour: clicking the first 'first' div will alert: "0"
// clicking the second 'first' div, will alert: "1"
// so it takes the divs with a class of 'second' out of the index() calculation
// possible with jQuery .index()?
​

Answer 1

以下内容应该适合您的需求：

$('.holder div.first').click(function() {
    alert($(this).index(".first"));            
});

或者对于更通用的解决方案（.second同样如此）：

$('.holder div').click(function() {
    alert($(this).index("." + $(this).prop("class")));            
});

但这仅适用于，如果每个 div 只有一个类，并且该类是“ first// ”等second。third

如果您的 div 有多个类，您可以添加一个 data 属性，然后执行以下操作：

$('.holder div').click(function() {
    alert($(this).index("[data-category=" + $(this).attr("data-category") + "]"));            
});

和 HTML：

<div class="holder">
    <div class="first" data-category="first">First</div>
    <div class="second class-does-not-matter" data-category="second">Second</div>
    <div class="first another-div-class" data-category="first">First</div>
    <div class="second div-class" data-category="second">Second</div>
</div>​​​​​​​​​​​​​​​​​​

Wheredata-category被设置为它所属的任何类别。

Answer 2

您可以传递给.index()要为其计算索引的选择器。例如：在你的情况下，alert($(this).index('div.first'));