jQuery nextAll은 마지막 요소에서 멈추지 않을 것입니까?

Question

탐색을위한 키보드 지원 목록이 있습니다. 그러나 목록에있는 항목을 표시하고 숨기는 추가 jookery pokery (이 예제에서는 포함되지 않음)가 있습니다. 항목이 숨겨진 후에는 키보드 탐색 기능이 계속 작동해야하지만 표시 항목에만 해당됩니다.

저는이 기능이 뛰어납니다. 마지막으로 표시되는 항목이 현재 항목이고 사용자가 다시 누르면 문제가 발생합니다. 현재 클래스가 제거되고 존재하지 않는 항목으로 이동하려고 시도합니다. 항해 중도 똑같은 일이 발생합니다.

보이는 항목 만 탐색하고 첫 번째 항목과 마지막으로 보이는 항목에서 멈추게하려면 어떻게해야합니까?

jQuery(document).keydown(function(e) { 
 

 
    e.preventDefault(); 
 

 
    if (e.keyCode == 38) { // Capture Arrow Up key 38 
 

 
    var currentItem = jQuery(".options").children("li.current").removeClass("current").prevAll(':visible:first').addClass("current"); 
 

 
    } else if (e.keyCode == 40) { // Capture Arrow Down key 40 
 

 

 
    var currentItem = jQuery(".options").children("li.current").removeClass("current").nextAll(':visible:first').addClass("current"); 
 
    } 
 
});

.current { 
 
    border: solid 1px #f60 !important; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<ul class="options"> 
 
    <li class="current"><a href="#"><span>WW Portfolio Regions</span><span class="hidden">0</span></a> 
 
    </li> 
 
    <li><a href="#"><span>EMEA</span><span class="hidden">1</span></a> 
 
    </li> 
 
    <li><a href="#"><span>Americas</span><span class="hidden">2</span></a> 
 
    </li> 
 
    <li><a href="#"><span>AP</span><span class="hidden">3</span></a> 
 
    </li> 
 
    <li><a href="#"><span>NE IOT</span><span class="hidden">4</span></a> 
 
    </li> 
 
    <li><a href="#"><span>SW IOT</span><span class="hidden">5</span></a> 
 
    </li> 
 
    <li><a href="#"><span>CCE IOT</span><span class="hidden">6</span></a> 
 
    </li> 
 
    <li><a href="#"><span>MEA IOT</span><span class="hidden">7</span></a> 
 
    </li> 
 
</ul>

Answer 1

현재의 요소가 마지막 인 경우, nextAll()이 처음이 아니라면 빈 jQuery를 object.You이 경우 테스트 만 현재 요소에서 클래스를 제거 할 수 있습니다 반환합니다 (또는 마지막) 하나 :

jQuery(document).keydown(function(e) { 
    var currentItem = jQuery(".options").children("li.current"); 
    if (e.keyCode == 27) {   // Capture Esc key 27 
     e.preventDefault(); 
     closeOptions(ddOptions, thisDd); 
    } else if (e.keyCode == 38) { // Capture Arrow Up key 38 
     e.preventDefault();   
     var prevItem = currentItem.prevAll(":visible:first"); 
     if (prevItem.length) { 
      currentItem.removeClass("current"); 
      prevItem.addClass("current"); 
     } 
    } else if (e.keyCode == 40) { // Capture Arrow Down key 40 
     e.preventDefault();   
     var nextItem = currentItem.nextAll(":visible:first"); 
     if (nextItem.length) { 
      currentItem.removeClass("current"); 
      nextItem.addClass("current"); 
     } 
    } 
});