どのアイテムが上にあり、どれが下にあるのかを知るには？

私は（私はそれが左/最初と最後の/右の上では動作しません知っている）、このようなコードを持っている：どのアイテムが上にあり、どれが下にあるのかを知るには？

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

たぶん代わりに ''

を使うのか？現在のcolとrowを追跡し、 '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

どのアイテムが上にあり、どれが下にあるのかを知るには？

答えて

関連する問題