jquery index（） - ホバーリストアイテム、同じインデックスのコンテンツを表示

Question

私は小さなメニューでjqueryの問題を抱えています。メニュー項目のリストがあります。リストアイテムの1つにカーソルを合わせると、リストアイテムと同じインデックスを共有するdivのリストからコンテンツを表示したいと思います。これは動的である必要がありますが、メニュー項目とコンテンツ項目はいくつでも許可されます。

$(document).ready(function() { 
    $("#leftnav li").each(function(){ 
     $(this).mouseover(function() { 
      //SHOW div that shares same index as this li 
     }); 
     $(this).mouseout(function() { 
      //HIDE div that shares same index as this li 
     }); 
    }); 
}); 

<ul id="leftnav"> 
    <li>Link 1</li> 
    <li>Link 2</li> 
</ul> 

<div id="content"> 
    <div>Content 1</div> 
    <div>Content 2</div> 
</div> 

Answer 1

は、私はおそらくこれを簡素化するためにhover()メソッドを使用したい（または急速なマウスの動きの問題のような他のいくつかの問題を解決しhoverIntentプラグインを、） 。

$(function() { 
    $('#leftnav li').hover(
      function() { 
       var idx = $('#leftnav li').index(this); 
       $('#content div').eq(idx).show(); 
      }, 
      function() { 
       var idx = $('#leftnav li').index(this); 
       $('#content div').eq(idx).hide(); 
      } 
     }): 
}); 

Answer 2

これはトリックを行う必要があります。

$(function() { 
     $('#leftnav li').mouseover(function() { 
      var index = $('#leftnav li').index($(this)); 
      $('#content').find('div:eq(' + index + ')').show(); 
     }).mouseout(function() { 
      var index = $('#leftnav li').index($(this)); 
      $('#content').find('div:eq(' + index + ')').hide(); 
     }); 
    }); 

Answer 3

prevAll().lengthを使用する。 .indexよりずっと良い。