Как отправить событие элементу в относительной позиции текущего элемента

Question

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

В приведенном ниже примере при нажатии вниз должен щелкнуть элемент 5, а при нажатии вверх - элемент 3.

• 1
• 2
• 3
• 4 (выбрано в данный момент)
• 5
• 6

Мое лучшее предположение - что-то вроде этого.

      <input
   _="on keyup[key is 'ArrowDown'] send click to the first .node-display end"
>

Кто-нибудь знает, как я бы на самом деле написал это выражение?

Answer 1

Вероятно, вы захотите наложить поведение на родительский ul поэтому вам не нужно повторять это на каждом входе.

Что-то вроде этого:

      <ul _="on keydown[key is 'ArrowDown'] from <input/> in me
           set nextSibling to it's parentElement's nextElementSibling
           if nextSibling
             set nextInput to the first <input/> in nextSibling
             call nextInput.focus()
             halt
           end
       on keydown[key is 'ArrowUp'] from <input/> in me
           set previousSibiling to it's parentElement's previousElementSibling
           if previousSibiling
             set previousInput to first <input/> in previousSibiling
             call previousInput.focus()
             halt
           end
       ">
  <li><input/></li>
  <li><input/></li>
  <li><input/></li>
  <li><input/></li>
</ul>

Некоторые примечания к этому коду:

• Я использую from from в обработчике событий, который помещает элемент, из которого произошло событие, в it символ
• Я использую keydown событие, чтобы мы могли отменить событие с помощью команды, чтобы клавиши вверх и вниз не меняли положение каретки
• Я использую halt команда, чтобы остановить распространение события
• я использовал focus вместо того, чтобы щелкнуть в качестве доказательства концепции