检测jquery / javascript中的最后一个列表项

时间:2010-12-09 16:26:30

标签: javascript jquery arrow-keys

我在网站上有一组标签(主标签),每个标签都有另一组标签(子标签)。 我想使用键盘上的箭头键来导航标签,而不是鼠标。

这些标签只是HTML列表项<li>

当我使用箭头键到达最后一个子标签时,我希望它返回到下一个主标签,以便它可以显示自己的子标签,并在其中进行导航。

我的问题是,当我使用箭头键(即右箭头键)到达最后一个列表项(选项卡)时,如何在jQuery / javascript中检测到?

非常感谢

3 个答案:

答案 0 :(得分:1)

您可以在jQuery中使用:last:last-child选择器。根据{{​​1}}标记的嵌套方式,您可能还必须使用children()函数。

例如,假设您有以下标记:

<li>

这将选择最后一个顶级 <ul id="nav"> <li>List item</li> <li>List item with sub items <ul> <li>Sub list item</li> </ul> </li> </ul>

<li>

alt text


这将选择向下遍历DOM的最后$('ul#nav > li:last').css('border', '1px solid red'); 。在这种情况下,它是<li>文本“子列表项”

<li>

alt text


这会选择任何$('ul#nav li:last').css('border', '1px solid red'); 标记,这些标记是其父级的最后一个子标记

<li>

alt text

答案 1 :(得分:0)

var maintabs = $('.maintab'),
    active_maintab_eq = 0,
    active_subtab_number = 1;

$(document).keyup( function(e){

if (e.which == 39) {
// right arrow key pressed
    if ( active_subtab_number == maintabs.eq(active_maintab_eq).find('li').length ) {
        // go to next main-tab
        // and reset active sub-tab counter
        ++active_maintab_eq;
        active_subtab_number = 1;
    } else {
        ++active_subtab_number;
    }
}

});

有些事情,我猜。

答案 2 :(得分:0)

您可以使用.length查看jQuery选择器是否找到了任何内容:

var nextSubTab = $(currentSubTab).next("li");
if (nextSubTab.length == 0) {
    // oops, end of this tab, switch to next tab
}