KeyBoard导航

Question

当用户按下键盘上的键时，我正在尝试在菜单上显示导航。

如果没有选择菜单项，请选择类“行”的第一个实例，如果行焦点存在，则删除当前焦点，并使用类“行焦点”更新下一个行实例。

我的html是格式化的：

<div id="group_1386" idgroup="1386" class="group">
  <div class="row feed-group-name row-focus" idgroup="1386"> <span class="text">Winter Is Coming</span></div>
  <div class="thetitles ui-sortable">
    <div id="feed_26451" class="row t-row"><span class="text">#sgluminis - Twitter Search</span> </div>
    <div id="feed_26453" class="row t-row"><span class="text">Twitter / MikeMagician</span> </div>
  </div>
</div>
<div id="group_1387" idgroup="1387" class="group">
  <div class="row feed-group-name" idgroup="1386"> <span class="text">Summer Is Coming</span></div>
  <div class="thetitles ui-sortable">
    <div id="feed_26451" class="row t-row"><span class="text">Summer Search</span> </div>
    <div id="feed_26453" class="row t-row"><span class="text">Hot Beaches</span> </div>
  </div>
</div>

当有人在键盘上单击"n“时，我想循环使用"row”类的元素。我可以使用.find()选择下一个类，但它返回多个行。我不能使用.first()，因为它并不总是第一个。如果类行有时是同级的，子级，但它总是有类“行”，那么如何找到类行的下一个实例。

$(document).on("keypress", null, "n", function(){
    if($(".row-focus").length){
        var curr = $("#ind-menu").find(".row-focus");
        var nextActive = $(curr).siblings().next(".row");
        $(curr).removeClass("row-focus");
        $(nextActive).addClass("row-focus");


        //selected.next().find(".row").next().addClass("row-focus");


    } else {
        //alert("nothing selected");
        $("#ind-feeds .row:first").addClass("row-focus");
    }
}); 

Answer 1

您在HTML中的每一组中都选择了一个元素--当N被按下时，您期望这些元素会如何表现？如果要允许每个组选择一个选项：

$(document).on("keypress", null, "n", function(){
    if($(".row-focus").length){
        var curr = $("#group_1386").find(".row-focus");
        var allActive = $(curr).parents(".group").find(".row");
        var currIndex = allActive.index(curr);
        var nextActive = allActive.eq(currIndex == allActive.size() - 1 ? 0 : currIndex + 1);

        $(curr).removeClass("row-focus");
        $(nextActive).addClass("row-focus");

    } else {
        $("#group_1386 .row:first").addClass("row-focus");
    }
});

JSFiddle演示

更新它以处理您想要的多个组。或者每页只有一个选择：

另一个JSFiddle演示