Javascript 使用箭头键/jQuery在多个列表中导航？

有一个有用的答案，显示了如何使用jQuery在列表中上下导航，您可以看到。代码如下：

var li = $('li');
var liSelected;
$(window).keydown(function(e){
    if(e.which === 40){
        if(liSelected){
            liSelected.removeClass('selected');
            next = liSelected.next();
            if(next.length > 0){
                liSelected = next.addClass('selected');
            }else{
                liSelected = li.eq(0).addClass('selected');
            }
        }else{
            liSelected = li.eq(0).addClass('selected');
        }
    }else if(e.which === 38){
        if(liSelected){
            liSelected.removeClass('selected');
            next = liSelected.prev();
            if(next.length > 0){
                liSelected = next.addClass('selected');
            }else{
                liSelected = li.last().addClass('selected');
            }
        }else{
            liSelected = li.last().addClass('selected');
        }
    }
});

我想实现类似的目标，但要稍微复杂一点。我的页面上将有多个列表，而不是一个列表。我已经把它们设置好了，这样它们就可以被禁止使用了。一旦该列表具有焦点，我希望上/下箭头键在列表中移动

我还想理解为什么上面的代码添加/删除类，而不是使用

element.focus（）实际提供元素焦点

我的HTML标记：

<ul tabindex="0" id="client-list" class="tabbable">
    <li tabindex="-1">Client 1</li>
    <li tabindex="-1">Client 2</li>
</ul>

<ul tabindex="0" id="product-list" class="tabbable">
    <li tabindex="-1">Product 1</li>
    <li tabindex="-1">Product 2</li>
</ul>

但是没有用。我猜这是一个非初学者，因为该元素将没有焦点，但子
li
项将有焦点。
我已修改了小提琴中的现有代码以使其工作：



需要做的第一件事是使用
$.focus（）
保存聚焦的ul

.next（）
和
.prev（）
已经只对兄弟姐妹有效，因此通过使用两个不同的uls，该功能可以正常工作

在第一次按向上/向下键时，以及当您想循环查看最后一个/第一个项目时，我必须更改从先前保存的选定ul中查找
first（）
/
last（）
，而不是全局lis列表

在我的编辑中，我确实将保存的jquery元素更改为使用更常见的语义，即名称以$开头，这不是必要的更改


要回答您的另一个问题，请使用类而不是.focus，这样可以更轻松地跟踪所选元素并为其设置样式。
这很好，谢谢。您是否知道如何修复列表中有很多项，因此会滚动的行为？我希望当移动到最后可见的
li
时，向下移动将滚动列表。事实上，情况并非如此。我举了你的例子。
if ( tabList.hasFocus ) {...

var $liSelected;
var $ulSelected;
$(window).keydown(function(e) {
    // Make sure we have a ul selected
    if($ulSelected) { 

        if(e.which === 40) {            
            if($liSelected) {
                $liSelected.removeClass('selected');
                var $next = $liSelected.next();
                if($next.length) {
                    $liSelected = $next.addClass('selected');
                }
                else {
                    $liSelected = $ulSelected.children('li').first().addClass('selected');  
                }
            }
            else {
                $liSelected = $ulSelected.children('li').first().addClass('selected');            
            }
        }else if(e.which === 38) {            
           if($liSelected) {
                $liSelected.removeClass('selected');
                var $prev = $liSelected.prev();
                if($prev.length) {
                    $liSelected = $prev.addClass('selected');
                }
                else {
                    $liSelected = $ulSelected.children('li').last().addClass('selected');  
                }
            }
            else {
                $liSelected = $ulSelected.children('li').last().addClass('selected');            
            }
        }

    }
});


$('ul').focus(function(e) {
    $ulSelected = $(this);
    $liSelected.removeClass('selected');
    $liSelected = false;
});