如何知道所选项目的上方和下方？

Question

我有这样的代码（我知道它不会在第一/左和最后/右工作）：

 $(document).keydown(function(e) { if (e.which == 38) { // UP } else if (e.which == 40) { // DOWN } else if (e.which == 37) { // LEFT $('.selected').removeClass('selected').prev().addClass('selected'); } else if (e.which == 39) { // RIGHT $('.selected').removeClass('selected').next().addClass('selected'); } }); 

 ul { width: 200px; height: 200px; list-style: none; margin: 0; padding: 0; border: 1px solid gray; overflow: auto; } li { width: 20px; height: 20px; margin: 5px; float: left; } li.selected { background: blue; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li class="selected"></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> 

当我按下向上箭头时如何选择上方的项目，当我按下向下箭头时如何选择下方的项目？

Answer 1

 var $li = $('li'); function adjustSelected ( offset ) { var $selected = $li.filter('.selected'); var currentIndex = $li.index($selected); if ( currentIndex + offset > -1 && currentIndex + offset < $li.length ) { $selected.removeClass('selected'); $li.eq(currentIndex + offset).addClass('selected'); } } $(document).keydown(function(e) { if (e.which == 38) { // UP adjustSelected(-6); } else if (e.which == 40) { // DOWN adjustSelected(6); } else if (e.which == 37) { // LEFT adjustSelected(-1); } else if (e.which == 39) { // RIGHT adjustSelected(1); } }); 

 ul { width: 200px; height: 200px; list-style: none; margin: 0; padding: 0; border: 1px solid gray; overflow: auto; } li { width: 20px; height: 20px; margin: 5px; float: left; background: #888; } li.selected { background: blue; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li class="selected"></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> 

Answer 2

 var each_row = $("ul").width()/$("li").width(); var current_item = $("ul li.selected").index()+1; $(document).keydown(function(e) { if (e.which == 38) { //UP $('.selected').removeClass('selected'); current_item = current_item - each_row; $( "ul li:nth-child("+current_item+")").addClass('selected'); } else if (e.which == 40) { // DOWN $('.selected').removeClass('selected'); current_item = current_item + each_row; $( "ul li:nth-child("+current_item+")" ).addClass('selected'); } else if (e.which == 37) { // LEFT $( "ul li:nth-child("+current_item+")" ).removeClass('selected'); current_item--; $( "ul li:nth-child("+current_item+")" ).addClass('selected'); } else if (e.which == 39) { // RIGHT $( "ul li:nth-child("+current_item+")" ).removeClass('selected'); current_item++; $( "ul li:nth-child("+current_item+")" ).addClass('selected'); } }); 

 ul { width: 200px; height: 200px; list-style: none; margin: 0; padding: 0; border: 1px solid gray; overflow: auto; } li { width: 20px; height: 20px; float: left; } li.selected { background: blue; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li class="selected"></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> 

Answer 3

在这里，您获得了纯JavaScript解决方案，可用于附加节点和虚拟节点。 我重写了所有代码，因此可以根据需要更改样式，ID值等。

 window.addEventListener('keydown',function(event){ var getUl = document.getElementById('ulContainer'); var getLi = getUl.children; var key = event.keyCode; var upDown = key===38 ? -1:key===40 ? 1:0; var firstLast = key===38 ? getLi.length-1:key===40 ? 0:0; if(key===38||key===40){ for(var i=0;i<getLi.length;i++){ //find selected LI if(getLi[i].classList.contains('selected')){ if(getLi[i].classList.length===1){ //if there is just one class, remove whole attribute class getLi[i].removeAttribute('class'); } else { getLi[i].classList.remove('selected'); //if there is few classes, remove 'selected' value } //if keyUP [i-1] //if keyDOWN [i+1] //if keyUP and first sibling [jump to last li] //if keyDOWN and last sibling [jump to first li] var getSibling = getLi[i+upDown] ? getLi[i+upDown]:getLi[firstLast]; getSibling.classList.add('selected'); break; } } } }); 

 #ulContainer>li{ list-style-type:none; width:200px; height:25px; margin:5px; background-color:#33aaff; } #ulContainer>li[class="selected"]{ background-color:#ff55aa; } 

 <ul id="ulContainer"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li class="selected">6</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li> <li>11</li> <li>12</li> <li>13</li> <li>14</li> <li>15</li> </ul>