输入字段的键盘导航跳过添加类

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');
    }