Выберите следующий элемент класса во вложенных DOM-элементах, используя jQuery - PullRequest
Новая
       5

Выберите следующий элемент класса во вложенных DOM-элементах, используя jQuery

0 голосов
/ 12 февраля 2020

Учитывая следующую ситуацию, обозначая несколько элементов меню (outer), состоящих из пунктов меню (item), каждый из которых имеет подпункты (sub). При этом самое большее один outer div также имеет класс visible; кроме того, один sub имеет класс selected: 

<div class='outer visible'>
   <div class='item'>
      <div class='sub'>1</div>
      <div class='sub selected'>2</div>
   </div>
   <div class='item'>
      <div class='sub'>3</div>
   </div>
</div>
<div class='outer'>
   <div class='item'>
      <div class='sub'>4</div>
      <div class='sub'>5</div>
   </div>
</div>

Используя jQuery, я хочу "переместить" класс selected в следующий или предыдущий sub, который является частью меню visible, при нажатии клавиш вверх или вниз. Я думал о том, чтобы как-то использовать селектор .next, но пока не увенчался успехом. Ожидаемое поведение: при нажатии клавиши вверх класс selected перемещается в подпункт 1, при нажатии вниз в подпункт 3. В случае подпункта 3 - selected, нажатие клавиши вниз должно переместить класс selected в sub 1 , et c. 

(document).on('keydown', function (e) {
    if (e.which == 38 || e.which == 40) {
        var current_selection = $('.category_select_sub_item.selected');
        current_selection.removeClass('selected');
        /* future_selection = "current_selection.next()" */
        future_selection.addClass('selected');
    }
 }
...