jquery - 从输入字段进行键盘导航，跳过添加类

Question

我有一个输入字段和一个带有四个操作系统的 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');
    }

}

});

这是 fiddle : http://jsfiddle.net/TF6Rb/771/

Answer 1

在 cur.next().length = 0 之前，curr.length 不为零。这意味着，当光标位于最后一个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');
    }