Question

I have two <ul> lists:

Item 1     A5
Item 2     A4
Item 3     A2
Item 4     A1
Item 5     A3

Where would I start to write code which when I hover over any <li> in either list, it will highlight the Item in the first list and the corresponding A in the second list.

For instance, hovering over “Item 3” in list 1 should highlight both that and “A3” in list 2.

Important: The numbers are not present in the text of the lists, that was just to help explain. The actual HTML looks like this:

<ul class="list1">
    <li id="qq1">dfgfdgfdg</li>
    ....
</ul>

<ul class="list2">
    <li id="aa1">cvbcvbcvb</li>
    ....
</ul>

Answer 1

If your IDs will stay in that format, then:

$(".list1 li, .list2 li").hover(function () {
    var n = this.id.substr(2);
    $("#qq" + n + ", #aa" + n).toggleClass("highlight");
});

Demo: http://jsfiddle.net/e37Yg/