Как получить индекс родительского элемента в jQuery

Question

У меня возникли проблемы с написанием функции jQuery, и я мог бы воспользоваться небольшой помощью.Вот что я хотел бы сделать:

У меня есть элемент ul с 5 li детьми.В другом месте на странице у меня есть контейнерный блок с 5 дочерними элементами.Когда я нажимаю на ссылку в третьем окне, я хочу скрыть остальные элементы и показать только третий.

В настоящее время каждый раз, когда я нажимаю на ссылку в одном из li, он возвращает индекс li во всех li на странице, а не в содержащем ul.

Вот мой код:

$('.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);
    });
});

Есть идеи?Большое спасибо.
Маркус

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);
    });
});