입력란에서 키보드 탐색 클래스 추가 건너 뛰기

Question

4 개의 운영 체제가있는 입력란과 div가 있습니다. 커서가 입력 필드에 있고 아래쪽 화살표를 누르면 아래로 누를 때 각 OS div를 순환합니다. 문제는 당신이 마지막 div에 도달하고, 아래로, 그것은 상단에있는 첫 번째 div로 돌아 가야하지만, 그것은 첫 번째 키보드에서 존재하지 않는 div로 "건너 뛰는"것처럼 보이지만 누르는 경우입니다. 두 번째로, 첫 번째 div로 되돌아갑니다. "건너 뛰지"않고 목록에서 마지막 div를 눌러 목록의 첫 번째 div로 바로 이동하려면 어떻게해야합니까? 이 작업을 올바르게 수행하는 방법에 대한 아이디어가 있습니까? 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'); 
    } 

} 

}); 

이 바이올린입니다 :

여기

<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를 수 있습니다 : 여기

는 HTML입니다. 즉, 커서가 마지막 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'); 
    }