You need to implement navigation through the tree of nested lists using jQuery. Error selecting the next item. You only need to select the first item in the nested list. When .children selects everything, but .first does not work for some reason

(function () { function moveLeft() { $('.active').removeClass().parent().addClass('active') }; function moveUp() { $('.active').removeClass().prev().addClass('active') }; function moveRight() { $('.active').removeClass().children().addClass('active') }; function moveDown() { $('.active').removeClass().next().addClass('active') }; document.onkeydown = function (e) { switch (e.keyCode) { case 37: moveLeft(); break; case 38: moveUp(); break; case 39: moveRight(); break; case 40: moveDown(); break; } }; })(); 
  ul li.active { background-color: yellow; color: blue; } ul li.active > ul { background: #fff; color: #000; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul> <li class="active">li1 <ul> <li>sub li1 <ul> <li>child1</li> <li>child2</li> <li>child3</li> </ul> </li> <li>sub li2 <ul> <li>child1</li> <li>child2</li> <li>child3</li> </ul> </li> <li>sub li3 <ul> <li>child1</li> <li>child2</li> <li>child3</li> </ul> </li> <li>sub li4 <ul> <li>child1</li> <li>child2</li> <li>child3</li> </ul> </li> <li>sub li5 <ul> <li>child1</li> <li>child2</li> <li>child3</li> </ul> </li> </ul> </li> <li>li2 <ul> <li>sub li1 <ul> <li>child1</li> <li>child2</li> <li>child3</li> </ul> </li> <li>sub li2 <ul> <li>child1</li> <li>child2</li> <li>child3</li> </ul> </li> <li>sub li3 <ul> <li>child1</li> <li>child2</li> <li>child3</li> </ul> </li> <li>sub li4 <ul> <li>child1</li> <li>child2</li> <li>child3</li> </ul> </li> <li>sub li5 <ul> <li>child1</li> <li>child2</li> <li>child3</li> </ul> </li> </ul> </li> </ul>

  • To select an item from the list, you can use the function eq - Alex Krass
  • The working code is in response below. - Kairat

1 answer 1

In moveRight() use $('.active').removeClass().children().children().first() , and in moveLeft() use $('.active').removeClass().parent().parent().addClass('active') , since you have <ul> between <li> <ul> . JsFiddle working code

 (function () { function moveLeft() { if ($('.active').parent().parent().is("li")){ $('.active').removeClass().parent().parent().addClass('active') } }; function moveUp() { if ($('.active').prev().is("li")){ $('.active').removeClass().prev().addClass('active') } }; function moveRight() { if ($('.active').children().children().first().is("li")){ $('.active').removeClass().children().children().first().addClass('active') } }; function moveDown() { if ($('.active').next().is("li")){ $('.active').removeClass().next().addClass('active') } }; document.onkeydown = function (e) { switch (e.keyCode) { case 37: moveLeft(); break; case 38: moveUp(); break; case 39: moveRight(); break; case 40: moveDown(); break; } }; })();