鍵盤從輸入域導航跳過添加一個類

Question

我有一個輸入字段和一個具有四個操作系統的div。當光標在輸入區域並按下向下箭頭時，按下時它應該循環通過每個OS div。問題是，當你到達最後一個div時，按下它應該回到頂部的第一個div，但是，它似乎在第一個鍵盤上按下「跳過」到一個不存在的div，但是如果按下它第二次，它應該回到第一個div。我怎樣才能讓它不「跳過」，並從列表中的最後一個div按下直接進入列表中的第一個div？任何想法如何讓這個工作正常？

下面是HTML：

<input id="system" value="" /> 
<div id="system-drop"> 
    <div class="os active">Mac</div> 
    <div class="os">Windows</div> 
    <div class="os">Linux</div> 
    <div class="os">Other</div> 
</div> 

這裏是jQuery的：

$("#system").live('keyup',function(e){   
var curr = $('#system-drop').find('.active'); 

if(e.keyCode == 40 || e.charCode == 40){ 

    if(curr.length){ 
      $('.os.active').removeClass('active'); 
      $(curr).next().addClass('active'); 
    } else{ 
     $('#system-drop div:first-child').addClass('active'); 
    } 

} 

}); 

這裏是小提琴： http://jsfiddle.net/TF6Rb/771/

Answer 1

的curr.length不是零，直到cur.next().length = 0。也就是說，當光標位於最後一個div時，cur.length仍然是1，但沒有cur.next()。

修改的jsfiddle here

改變你的條件如下圖所示，它應該工作，

var nextActive = $(curr).next(); 
    $('.os.active').removeClass('active'); 

    if(nextActive .length){ 
     nextActive.addClass('active'); 
    } else{ 
     $('#system-drop div:first-child').addClass('active'); 
    }