jquery - 如何在 jQuery 中获取父元素的索引

Question

我在编写 jQuery 函数时遇到一些问题，需要一些帮助。这是我想要实现的目标:

我有一个 ul 元素，有 5 个 li 子元素。在页面的其他地方，我有一个包含 5 个 div 子级的容器 div。当我单击第三个里的链接时，我想隐藏其他 div 并仅显示第三个。

目前，每次我单击其中一个 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);
    });
});