如何知道哪個項目在上面，哪個項目在選定項目下面？

我有這樣的代碼（我知道它不會在第一/左和最後一個/右工作）：如何知道哪個項目在上面，哪個項目在選定項目下面？

$(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>

如何選擇項目這上面，當我按下向上箭頭和當我按下箭頭時下面的項目？

來源

2016-12-10 jcubic

也許使用''

代替？跟蹤當前的列和行，並在'up'/'down'和'left'/'right'列上導航行，並突出顯示交叉點上的單元格。 – 0x2D9A3

回答

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>

來源

2016-12-10 20:30:25 oguzhancerit

如果你從jQuery對象獲取寬度會更好。 – jcubic

@jcubic我做了，寬度來自jquery對象了。 – oguzhancerit

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>

來源

2016-12-10 20:29:45 Taplar

當我調整容器大小時，這將不起作用，我想爲任何寬度工作。 – jcubic

在這裏你有純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++){ 
 
     
 
\t //find selected LI 
 
     if(getLi[i].classList.contains('selected')){ \t 
 
     if(getLi[i].classList.length===1){ 
 
      
 
      //if there is just one class, remove whole attribute class 
 
      getLi[i].removeAttribute('class'); \t 
 
      } else { 
 
      getLi[i].classList.remove('selected'); \t //if there is few classes, remove 'selected' value 
 
      } 
 
\t \t \t \t 
 
     //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]; \t 
 
     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>

來源

2016-12-10 21:05:17

相關問題