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 highli开发者_StackOverflow中文版ght 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>

---

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/

---

$('li#item3').hover(function(){
    $(this, '#A3', '#B1').addClass('hilite');
},function(){
    $(this, '#A3', '#B1').removeClass('hilite');
});

---

$('.list1 li,.list2 li').hover(function() {
    $(this).addClass('hovered')
        .siblings()
        .removeClass('hovered');
    $($(this).closest('ul').is('.list1')?'.list2 li':'.list1 li').eq($(this).index())
        .addClass('hovered')
        .siblings()
        .removeClass('hovered');
});

demo