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

Question

我在网站上有一组选项卡（主选项卡），每个选项卡都有另一组选项卡（子选项卡）。 我想使用键盘上的箭头键而不是鼠标来导航选项卡。

这些选项卡只是 HTML 列表项

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

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

非常感谢

Answer 1

您可以使用 :last 或 :last-child jQuery 中的选择器。根据

标签的嵌套方式，您可能还必须使用 children() 与其一起起作用。

例如，假设您有以下标记：

    <ul id="nav">
        <li>List item</li>
        <li>List item with sub items
            <ul>
                <li>Sub list item</li>
            </ul>
        </li>
    </ul>

这将选择最后一个顶级

$('ul#nav > li:last').css('border', '1px solid red');

---

这将选择向下遍历 DOM 的最后一个

。在本例中，它是带有文本“子列表项”的

$('ul#nav li:last').css('border', '1px solid red');

---

> 最后一个子级的任何

标签

$('ul#nav li:last-child').css('border', '1px solid red');

将选择其父级 的

Answer 2

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;
    }
}

});

我猜是这样的事情。

Answer 3

您可以使用 .length 来查明 jQuery 选择器是否发现任何内容：

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