jQuery: show and hide list elements of equivalent position in other list

Question

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!

Answer 1

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/