Jquery - навигация по списку с помощью клавиш со стрелками

Question

Замечу, если это возможно через Jquery. Цель состоит в том, чтобы использовать клавиатуру для перемещения по списку с помощью нескольких направлений (влево, вправо, вверх, вниз). Была проверка это jQuery 2.1.0 | Навигация по списку с помощью клавиш со стрелками

Но есть ли какие-либо идеи, чтобы прийти в себя.

<div class="container">
  <ul className="size-dropdownlist">
    <li className="size-dropdownlist__item">
      <div className="size-dropdownlist__item____holder">
        <a href="#" className="size-dropdownlist__item____holder--link">A</a>
      </div>
    </li>
    <li className="size-dropdownlist__item">
      <div className="size-dropdownlist__item____holder">
        <a href="#" className="size-dropdownlist__item____holder--link">B</a>
      </div>
    </li>
    <li className="size-dropdownlist__item">
      <div className="size-dropdownlist__item____holder">
        <a href="#" className="size-dropdownlist__item____holder--link">C</a>
      </div>
    </li>
    <li className="size-dropdownlist__item">
      <div className="size-dropdownlist__item____holder">
        <a href="#" className="size-dropdownlist__item____holder--link">D</a>
      </div>
    </li>
    <li className="size-dropdownlist__item">
      <div className="size-dropdownlist__item____holder">
        <a href="#" className="size-dropdownlist__item____holder--link">E</a>
      </div>
    </li>
    <li className="size-dropdownlist__item">
      <div className="size-dropdownlist__item____holder">
        <a href="#" className="size-dropdownlist__item____holder--link">F</a>
      </div>
    </li>
    <li className="size-dropdownlist__item">
      <div className="size-dropdownlist__item____holder">
        <a href="#" className="size-dropdownlist__item____holder--link">G</a>
      </div>
    </li>
    <li className="size-dropdownlist__item">
      <div className="size-dropdownlist__item____holder">
        <a href="#" className="size-dropdownlist__item____holder--link">H</a>
      </div>
    </li>
    <li className="size-dropdownlist__item">
      <div className="size-dropdownlist__item____holder">
        <a href="#" className="size-dropdownlist__item____holder--link">I</a>
      </div>
    </li>
    <li className="size-dropdownlist__item">
      <div className="size-dropdownlist__item____holder">
        <a href="#" className="size-dropdownlist__item____holder--link active">J</a>
      </div>
    </li>
    <li className="size-dropdownlist__item">
      <div className="size-dropdownlist__item____holder">
        <a href="#" className="size-dropdownlist__item____holder--link">K</a>
      </div>
    </li>
    <li className="size-dropdownlist__item">
      <div className="size-dropdownlist__item____holder">
        <a href="#" className="size-dropdownlist__item____holder--link">L</a>
      </div>
    </li>
    <li className="size-dropdownlist__item">
      <div className="size-dropdownlist__item____holder">
        <a href="#" className="size-dropdownlist__item____holder--link">M</a>
      </div>
    </li>
    <li className="size-dropdownlist__item">
      <div className="size-dropdownlist__item____holder">
        <a href="#" className="size-dropdownlist__item____holder--link">N</a>
      </div>
    </li>
  </ul>
</div>

Демо: https://jsfiddle.net/g59onr13/24/