入力フィールドからのキーボードナビゲーションクラスの追加をスキップ

Question

私は4つのオペレーティングシステムを持つ入力フィールドと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のです： http://jsfiddle.net/TF6Rb/771/

Answer 1

curr.lengthがcur.next().length = 0までゼロではなかった。

$("#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'); 
    } 

} 

}); 

ここでフィドルです。つまり、カーソルが最後のdivにあるときは、cur.lengthは1のままですが、cur.next()はありません。 :)おかげSKSをjsFiddle here

を修正

は、以下のようなあなたの条件を変更して

、それが動作するはずです、

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

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