jquery - 相应的 同时悬停高亮

Question

好吧，有点奇怪，

我有 2 个 ul，每个都有相同数量的 li...

在 jQuery 中，我希望能够覆盖任一 ul li 并查看它，并且其对应的 li（来自另一个 ul）获得类“highlight”...

我虽然可以通过计算列表顶部的数字来完成？

仍然不知道该怎么做。

这是我正在寻找的视觉表示：

Answer 1

$('#list1 > li').hover(function() {
    $('#list2 > li').eq($(this).index()).addClass('hover');
}, function() {
    $('#list2 > li').eq($(this).index()).removeClass('hover');
});

或者，如果您想要双向：

$('.list > li').hover(function() {
    var idx = $(this).index();
    $('.list > li:nth-child('+(idx+1)+')').addClass('hover');
}, function() {
    var idx = $(this).index();
    $('.list > li:nth-child('+(idx+1)+')').removeClass('hover');
});

演示：http: //jsfiddle.net/ThiefMaster/XNRux/

Answer 2

尝试这个：

$("ul.list1>li").hover(function(){
      var ind=$(this).index();
   $(this).css("background-color","red");
   $('ul.list2 li:eq('+ind+')').css("background-color","red");
},
function(){
    var ind=$(this).index();
  $(this).css("background-color","transparent");
   $('ul.list2 li:eq('+ind+')').css("background-color","transparent");
});

$("ul.list2>li").hover(function(){
    var ind=$(this).index();
   $(this).css("background-color","blue");
   $('ul.list1 li:eq('+ind+')').css("background-color","blue");
},
function(){
    var ind=$(this).index();
   $(this).css("background-color","transparent");
   $('ul.list1 li:eq('+ind+')').css("background-color","transparent");
});

这里是详细的JSFiddle

Answer 3

$('li', 'ul.list1, ul.list2').hover(

function() {

    $('li:eq('+ $(this).index() +')', 'ul.list1, ul.list2').addClass('highlight');

},

function() {

    $('li:eq('+ $(this).index() +')', 'ul.list1, ul.list2').removeClass('highlight');

});

演示