обнаружение последнего элемента списка в jquery / javascript

Question

У меня есть набор вкладок (главных вкладок) на веб-сайте, и у каждой вкладки есть свой набор вкладок (вложенных вкладок). Я хочу использовать клавиши со стрелками на клавиатуре для навигации по вкладкам вместо мыши.

Эти вкладки являются просто элементами списка HTML <li>

Когда я доберусь до последней вложенной вкладки с помощью клавиши со стрелкой, я хочу, чтобы она вернулась к следующей главной вкладке, чтобы она могла отображать свои собственные вложенные вкладки и продолжить навигацию внутри нее.

У меня вопрос, как я могу определить в jQuery / javascript, когда я достиг последнего элемента списка (вкладки), используя клавиши со стрелками, т.е. клавишу со стрелкой вправо?

Большое спасибо

Answer 1

В jQuery вы можете использовать селекторы : last или : last-child .В зависимости от того, как вложены ваши теги <li>, вам также может понадобиться использовать функцию children () вместе с ней.

Например, допустим, у вас есть следующая разметка:

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

При этом будет выбран последний верхний уровень <li>

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

---

При этом будет выбран последний <li>, пересекающийДОМ вниз.В данном случае это <li> с текстом «Элемент подсписка»

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

---

. Здесь будут выбраны любые теги <li>, которые являются последними дочерними элементамиих родители

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

Answer 2

Вы можете использовать .length, чтобы узнать, нашел ли селектор jQuery что-либо:

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

Answer 3

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

});

Думаю, что-то подобное.