我有一组包含嵌套列表的列表项,就像这样:
<ul class="searchselectors">
<li class="group">Group name 1
<ul>
<li class="item selected">List item 1.1</li>
<li class="item">List item 1.2</li>
<li class="item">List item 1.3</li>
</ul>
</li>
<li class="group">Group name 2
<ul>
<li class="item">List item 2.1</li>
<li class="item">List item 2.2</li>
<li class="item">List item 2.3</li>
</ul>
</li>
<li class="group">Group name 3
<ul>
<li class="item">List item 3.1</li>
</ul>
</li>
</ul>
我想使用向上/向下箭头键循环所有的.item
元素(我已经通过使用on('keydown')
和捕获键代码38
和40
设置了),并在当前选中的项目之前或之后的下一个项目上设置.selected
,根据需要环绕到顶部/底部。
使用$().next()
和$().prev()
将不起作用,因为它只作用于兄弟,而不是像$('.searchselectors .item')
这样的jQuery对象。
我正在研究同样的问题,但在我的项目中,我使用KnockoutJS。实际上,最初的逻辑是用纯jQuery编写的,我用Knockout对其进行了重构。下面是使用jQuery的解决方案:
小提琴——http://jsfiddle.net/6QN77/2/
我没有花太多时间清理JavaScript,但是我现在把它留给你。