title: jquery index() - hover list item, show content with same index
body: <p>I'm having a jquery issue with a small menu I have.  I have a list of menu items.  When I hover over one of the list items, I would like to show the content from a list of divs that shares the same index as the list item.  This needs to be dynamic do allow any number of menu items and content items.</p>
  
  <pre><code>$(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
          });
      });
  });
  
  &lt;ul id="leftnav"&gt;
      &lt;li&gt;Link 1&lt;/li&gt;
      &lt;li&gt;Link 2&lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;div id="content"&gt;
      &lt;div&gt;Content 1&lt;/div&gt;
      &lt;div&gt;Content 2&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>