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

Question

I this： 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 有多个类，您可以添加一个数据属性，然后执行以下操作：

$('.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>​​​​​​​​​​​​​​​​​​

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

Answer 2

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