Sélectionnez un objet dans deux listes lorsque mouseover

Question

J'ai deux <ul> listes:

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

Où puis-je commencer à écrire du code qui, quand je passe la souris sur une <li> soit dans la liste, il mettra en évidence l'élément dans la première liste et le A correspondant dans la deuxième liste.

Par exemple, planant au-dessus « article 3 » dans la liste 1 devrait mettre en évidence à la fois que et « A3 » dans la liste 2.

Important: Les chiffres ne sont pas présents dans le texte des listes, qui était juste pour aider à expliquer. Le code HTML réel ressemble à ceci:

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

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

Answer 1

Si vos ID restent dans ce format, puis:

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

Démo: 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