jQuery 2.1.0 |使用箭头键进行列表导航

【问题标题】：jQuery 2.1.0 | List navigation with arrow keysjQuery 2.1.0 |使用箭头键进行列表导航
【发布时间】：2015-03-23 15:18:01
【问题描述】：

我在键盘箭头键的帮助下在我的应用程序中导航。在我的应用程序中，一些动态设置的元素在列表中垂直显示。到目前为止，下面的代码允许在每个动态设置<li> 中进行水平导航，并在所有动态设置<li> 中进行垂直导航。但是有一个小故障：我似乎无法在所有可用链接中垂直导航（元素目标焦点不是目标链接）。

See FIDDLE for demo。

重要提示：您的解决方案必须提供忽略每个 <li> 中元素数量或其类型或类的代码。因此，为了保持代码的简洁和灵活，您的解决方案必须只引用被聚焦的源元素的索引位置，并以与源具有相同索引的目标元素为目标（源元素索引更大比可用的目标元素索引必须以最后一个目标元素为目标）：

<ul>
<li><div class="card"><a href="javascript:void(0)" class="card-title">My Card</a><button class="card-export">CE</button><button class="vc-target">CT</button></div></li>
<li><div class="card"><a href="javascript:void(0)" class="card-title">My Card</a><button class="card-export">CE</button><button class="vc-target">CT</button></div></li>
<li><div class="card"><a href="javascript:void(0)" class="card-title">My Card</a><button class="card-export">CE</button><button class="vc-target">CT</button></div></li>
</ul>


$(function(){

$('.card').on('keydown', function(e){

var isfocus = $(this).find('a:focus,button:focus');
var isfocusindex = $(this).find('a:focus,button:focus').index()-1;
var afocus = $(this).find('a:focus');
var bfocuslast = $(this).find('button:last:focus');

if ( e.which == 37 ) { // Left arrowkey
isfocus.prev('button,a').focus();
afocus.parent('div').find('button:last').focus();
}
if ( e.which == 39 ) { // right arrowkey
isfocus.next('button').focus();
bfocuslast.parent('div').find('a:first').focus();
}

if ( e.which == 40 ) { // down arrowkey 
isfocus.parent('div').parent('li').next('li').find('div').find('a:eq('+isfocusindex+'),button:eq('+isfocusindex+')').focus();
}
if ( e.which == 38 ) { // UP arrowkey 
isfocus.parent('div').parent('li').prev('li').find('div').find('a:eq('+isfocusindex+'),button:eq('+isfocusindex+')').focus();
}

});

});

【问题讨论】：

• "重要提示：您的解决方案必须提供不注意每个
• 中元素数量或其类型或其类的代码。因此，为了使代码保持最小和灵活，您的解决方案只能参考索引位置”...
嘿，伙计，我们是来帮助您的，而不是为您工作。这样写感觉有点挑战..