Trouble with jQuery index()

Question

I have a group of images I'm using as a slide show. The javascript I'm using looks at which image has the .active class on it to know which image is being displayed. The trouble is, jQuery's .index() function isn't working as I would expect it to. So for:

<div id="Phase1">    
    <img src="_images/Phase1-Slide1.jpg" alt="1" class="active">
    <img src="_images/Phase1-Slide2.jpg" alt="2">
    <img src="_images/Phase1-Slide3.jpg" alt="3">
    <img src="_images/Phase1-Slide4.jpg" alt="4">
    <img src="_images/Phase1-Slide5.jpg" alt="5">
    <img src="_images/Phase1-Slide6.jpg" alt="6">
</div>

Relevant javascript:

// works fine
var i = $(".active").index("img");
alert(i);  

// does not work
var i = $(".active").index("#Phase1 img");
alert(i);  

I need to be able to specify the parent div because I'm working with 2 slideshows, and they will each have a different active image, and different total number of images.

I've tried all different ways but can't get it to work with the parent div. Here's the fiddle: http://jsfiddle.net/mBVpc/

Answer 1

I think you want this:

var i = $("#Phase1 .active").index("img");

The reason being is that index() is called on a collection of elements based on a selector, so you have to have the selection you want before you try to get the index (in this case, .active class elements in the div with an id of #Phase1, which is what our selector returns).

Answer 2

Try this:

$('#Phase1 img.active').index();