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

Try this:

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