如何使用jquery保持滾動跳過列表中的項目？

Question

如何保持滾動跳過列表中的項目使用jQuery？使用鼠標懸停在列表中的列表項時，我沒有任何問題。但是當使用向上/向下箭頭鍵滾動列表時，有些項目會跳過，或者看起來會跳過。

例如，如果選擇的項目是項目6，則在使用向上箭頭鍵時，它可以跳過下一個序列項目（項目5）。

項目1個 項目2 項目3 項目4 第5項 項目6

$(document).ready(function(){ 
    $('li').hover(function(){ 
     j = $(this).parents("ul").find("li").index($(this)); 
     $('.hoverColor').removeClass('hoverColor'); 
     $(this).addClass('hoverColor'); 
    }); 
    j = -1; 
    $(document).keyup(function(e) { 
     if(e.keyCode == 38) // The Up arrow key 
     { 
      if(--j>0) { 
       j = 0; 
      } 
      $("li").removeClass('hoverColor'); 
      $("li:eq(" + j + ")","ul").addClass('hoverColor'); 
     } else if (e.keyCode == 40) { 
      if(++j >$("li", "ul").length-1){ 
       j = $("li", "ul").length-1; 
      } 
      $("li","ul").removeClass('hoverColor'); 
      $("li:eq(" + j + ")","ul").addClass('hoverColor'); 

     } 
    }); 
}); 

這裏的HTML代碼

測試聚焦

$（document）.ready（function（）{ $（'li'）。hover（function（）{ j = $（this）.parents（「ul」）。find（「li」）的.index（$（本））; $（'。hoverColor'）。removeClass（'hoverColor'）; $（this）.addClass（'hoverColor'）; }）; j = -1;如果（e.keyCode == 38）//向上箭頭鍵 如果（ - j $（「li」，「ul」）.length- 1） j = $（「li」，「ul」）.length-1; } $（「li」，「ul」）。removeClass（'hoverColor'）; $（「li：eq （「+ j +」）「，」ul「）。addClass（'hoverColor'）; // var str = $（」li：eq（「+ j +」）「，」ul「）。text（） ; // $（「li：eq（」+ j +「）」，「ul」）。scrollTop（str2.top）; // $（「＃textArea」）。insertAtCaret（str）; } }） }）;

。hoverColor { background-color：＃408080; 顏色：白色; } li { list-style-type：none; list-style-position：inside; text-align：left; margin-left：8px; padding：0px } div { overflow：scroll; width：200px; height：300px; }

試驗1

試驗2

試驗3

試驗4

試驗5

試驗6

試驗7

試驗8

試驗9

試驗1

試驗2

試驗3

試驗4

試驗5

試驗6

試驗7

試驗8

試驗9

Answer 1

$(document).ready(function(){ 
    $('li').hover(function(){ 
     j = $(this).parents("ul").find("li").index($(this)); 
     $('.hoverColor').removeClass('hoverColor'); 
     $(this).addClass('hoverColor'); 
    }); 
    j = -1; 
    $(document).keyup(function(e) { 
     if(e.keyCode == 38) // The Up arrow key 
     { 
      // if(--j>0) { 
      //  j = 0; 
      // } 
      $("li").removeClass('hoverColor'); 
      $("li:eq(" + j + ")","ul").addClass('hoverColor'); 
     } else if (e.keyCode == 40) { 
      if(++j >$("li", "ul").length-1){ 
       j = $("li", "ul").length-1; 
      } 
      $("li","ul").removeClass('hoverColor'); 
      $("li:eq(" + j + ")","ul").addClass('hoverColor'); 

     } 
    }); 
});