How to get parent element index in jQuery

Question

I'm having trouble writing a jQuery function and you can help a little. Here is what I would like to do:

I have a ul element with 5 li children. Elsewhere on the page I have a container container with 5 kids sofas. When I click the link in the third whether I would like to hide the other divs and show only the third.

Currently, every time I click a link in one of them, it returns the index li inside all li on the page, and not inside containing ul.

Here is my code:

$('.products #productNav li a:not(.active)').live('click', function() {
    var index = $(this).parent().index('li');
    alert(index);
    $('.products #copy div').fadeOut(200,function() {
        $('.products #copy div').eq(index).fadeIn(200);
    });
});

Any ideas? Many thanks.
Marcus

Answer 1

.index('li') .index(), .

: http://jsfiddle.net/cWWLM/

$('.products #productNav li a:not(.active)').live('click', function() {

          // Get index of the parent <li> relative to its siblings
    var index = $(this).parent().index();
    alert(index);
    $('.products #copy div').fadeOut(200,function() {
        $('.products #copy div').eq(index).fadeIn(200);
    });
});