Question

I this: http://jsfiddle.net/ZP76c/

I’m trying to control the scope at which jQuery selects elements based off their index(), possible?

<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

The following should suit your needs:

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

Or for a more general solution (so .second does the same):

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

This only works though, if each div only has one class, and the class is “first/second/third” etc.

And in case that your divs had several classes, you could add a data attribute instead, and then do something like the following:

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

and the 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>​​​​​​​​​​​​​​​​​​

Where data-category was set to whatever category it was a member of.