jquery keypress 遍历每个循环？答案

【问题标题】：jquery keypress iterate through each loop?jquery keypress 遍历每个循环？
【发布时间】：2011-01-01 21:38:13
【问题描述】：

大家好，可能是一个简单的问题，但是在网上找不到任何东西。

我有一个包含搜索结果的列表，我希望能够使用向上和向下键在列表中导航。

    if (e.keyCode == 40) { //down
        //alert('down');
        $('#searchresults ul li').each(function() { 

        });
    }

    if (e.keyCode == 38) { //up
        //alert('up');
    }

    if (e.keyCode == 13) { //enter
        //alert('enter');
    }

搜索结果如下所示：

<ul>
    <li class="matched"><a href="link1">link1</a></li>
    <li class="matched"><a href="link2">link2</a></li>
    <li class="matched"><a href="link3">link3</a></li>
</ul>

所以基本上我只想能够使用向上和向下键浏览我的搜索结果。当前元素的选择应该只是改变背景颜色，当我按下回车键时，链接和匹配的元素会被触发。

知道如何遍历搜索结果吗？谢谢

编辑：

var pressedCount = 0;

if (e.keyCode == 40) { //down
    console.log(pressedCount);
    $('#searchresults ul li').index(pressedCount).addClass('selected');
    pressedCount++;
}

不起作用，因为我在索引方法上做错了。然而，pressedCount 变量在每个 arrowkeydown 触发器上都会增加。

【问题讨论】：

只想指出：没有简单的问题，只有理解与否的状态。该站点用于第二种情况的状态。 :)

标签： jquery keyboard navigation

【解决方案1】：

工作演示： http://jsfiddle.net/zBjrS/1/

（您必须先单击页面，才能聚焦 IFRAME。）

【讨论】：

【解决方案2】：

我不确定我是否真的喜欢接管用户箭头键的想法，尤其是当我们生活在一个向上/向下页面不再出现在许多键盘（笔记本）上的世界中时。有很多用户使用箭头进行滚动。

如果您在结果中设置了键盘导航，只需将焦点设置在第一个链接上，然后 Tab 会向下，Shift+tab 会向上。

所有这些功能都已内置，您只需将焦点设置在第一个元素上

$('first_element_selector').focus();

【讨论】：

【解决方案3】：

这样的东西应该可以工作

if (e.keyCode == 40) { //down
    $('#searchresults ul li').each(function() { 
        if ($(this).hasClass('selected')) {
            $(this).removeClass('selected');
            $(this).next().addClass('selected');
            // use $(this).prev() for UP case
        }
    });
}

请注意，如果未选择任何项，您需要使用“选定”css 类预加载列表或添加一些代码以将选定项应用于列表中的第一项

你还需要代码来检查你是否在列表中的最后一项，在这种情况下你不会想调用 .next()

jQuery 下一个 http://api.jquery.com/next/

jQuery 上一个 http://api.jquery.com/prev/

jQuery hasClass http://api.jquery.com/hasClass/

jQuery removeClass http://api.jquery.com/removeClass/

【讨论】：