jQuery: show and hide list elements of equivalent position in other list
I'm stuck on something that I think should be easy... I've got a ul of links, and ul below that with a list of descriptions relating to each link. When I hover over a link in the first ul, I want to hide all the descriptions in the second ul, and just show the relevant one.
So I basically want to tell jQuery, for each link: "On hover, find my position in the list, then show the li at the equivalent position in the other list". I've got as开发者_开发知识库 far as:
$("ul#links li").hover(
function () {
$("ul#descriptions li").hide();
/* need to show the relevant one here! */
},
function () {
$("ul#descriptions li").hide();
}
);
Any help would be greatly appreciated!
Try using index
and eq
:
$("ul#descriptions li").hide();
var index = $(this).index();
$("ul#descriptions li").eq(index).show();
Working example: http://jsfiddle.net/mdamC/
精彩评论