jquery index () - навести курсор на элемент списка, показать содержимое с тем же индексом

Question

У меня проблема с jquery из-за небольшого меню. У меня есть список пунктов меню. При наведении курсора на один из элементов списка я хотел бы отобразить содержимое из списка элементов 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