Выделите элемент в двух списках, когда Mouseover

Question

У меня есть два <ul> списка:

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

Где бы я начал писать код, когда я парить над любым <li> в любом списке, он будет выделить элемент в первом списке и соответствующий А во втором списке.

Например, зависший над «Пункт 3» в списке 1 следует подчеркнуть, что как и «A3» в списке 2.

Важно: Номера нет в тексте списков, что было просто чтобы помочь объяснить. Действительное HTML выглядит следующим образом:

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

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

Answer 1

Если ваши идентификаторы будут оставаться в этом формате, то:

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

Демо: http://jsfiddle.net/e37Yg/

Answer 2

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

Answer 3

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