列表末尾滚动到顶部

时间:2017-06-02 23:58:51

标签: javascript jquery

我有一个很大的无序列表。当列表具有焦点时,我可以使用箭头键在列表中上下移动,但是当我到达最后一个链接时,如果我再次按下向下箭头,我需要它将焦点返回到第一个链接。此外,如果我在第一个链接上并按向上箭头,我需要它来关注最后一个链接。

我试过和第一个孩子和最后一个孩子一起玩,但是不知道怎么做。任何帮助都将非常感激。

我有jsFiddle可以玩。

我尝试了很多事情,这是一个例子:

$("ul li a:last-child:after")$(this).parents('li').find('a:first-child');

1 个答案:

答案 0 :(得分:1)

如上所述,强烈建议您查看learn.jquery网站。

至于解决方案:

Focus on list item on down arrow press中建立答案,该答案已滚动浏览所有项目。您需要做的是检查当前所选项目是否为最后一项。 jQuery有.last()方法,当你给它一个元素数组时,它将返回最后一个元素。在该示例中,它还将一类active放在当前选定的元素上,因此您只需要检查最后一个项是否具有“活动”类,您可以使用该类:

$("li").last().hasClass("active")

然后,如果这是真的,您想要选择第一个项目。 jQuery也有.first(),它与.last()的作用相反。所以你想选择第一个元素:

$("li").first().focus();

请记住,在代码示例中,当元素“聚焦”时,它会将“active”类应用于它。

此处的工作解决方案:https://jsfiddle.net/38zR3/766/

如果你想做相反的事情,当有人自动到达顶部时,只需将相反的代码放入“if key up”部分(即密钥代码38)。