Cách lấy chỉ mục của thành phần gốc trong jQuery

Question

Tôi đang gặp một số sự cố khi viết một hàm jQuery và có thể sử dụng một chút trợ giúp. Dưới đây là những gì tôi muốn hoàn thành:

Tôi có phần tử ul với 5 trẻ em li. Ở những nơi khác trên trang, tôi có một div container với 5 div trẻ em. Khi tôi nhấp vào liên kết trong li thứ ba, tôi muốn ẩn các div khác và chỉ hiển thị liên kết thứ ba.

Hiện tại mỗi lần tôi nhấp vào một liên kết trong một trong các li, nó trả về chỉ mục của li trong tất cả các li trên trang, không nằm trong chứa ul.

Dưới đây là mã của tôi:

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

Bất kỳ ý tưởng? Cảm ơn nhiều.
Marcus

Answer 1

Thay đổi .index('li') thành .index() để chỉ nhận số chỉ mục vị trí của nó so với anh chị em của nó.

Dưới đây là một ví dụ đơn giản: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); 
    }); 
});