keydownでクラス名を持つdiv間を移動するにはどうすればいいですか？

Question

私は画像divのリストを持っており、keyboard.Iで押された右、左、上と下の矢印でそれらの間を移動したいと思っています。次のjQueryを試しましたが、矢印を押すと画像のフォーカスは変わりません。フォーカスを受け取ったときに、ユーザーはどちらが選択されているかを知ることができます（デフォルトのフォーカスを常にページの読み込み中の最初のdivにする）。この問題を解決するのに手伝ってもらえますか？

のdiv：

<div class="scroller"> 
<div id="Div1" style="display: visiable;"> 

<div class="image1"> 
<a href="javascript:doIt('10')"> 
<img src="./content/1/102.jpg" alt="..">Movie 1 
</a> 
</div> 
<div class="image2"> 
<a href="javascript:doIt('11')"> 
<img src="./content/2/102.jpg" alt="..">Movie 2 
</a> 
</div> 
<div class="image3"> 
<a href="javascript:doIt('12')"> 
<img src="./content/3/102.jpg" alt="..">Movie 3 
</a> 
</div> 
<div class="image4"> 
<a href="javascript:doIt('13')"> 
<img src="./content/4/102.jpg" alt="..">Movie 4 
</a> 
</div> 

</div> 
</div> 

はjqueryの：

<script> 
$(document).keydown(function (e) { 
     var index = $(":focus").index() + 1; 
     if (e.which === 37) { 
       alert("left:37"); 
      $('div a:nth-child(' + (index - 1) + ')').focus(); 
    } else if (e.which === 39) { 
       alert("right 39"); 
      $('div a:nth-child(' + (index + 1) + ')').focus(); 
    } else if (e.which === 38) { 
       alert("Up:38"); 
      $('div a:nth-child(' + (index - 1) + ')').focus(); 
    } else if (e.which === 40) { 
       alert("Down:40"); 
      $('div a:nth-child(' + (index + 1) + ')').focus(); 
    } 
}); 


</script> 

CSS：

<style> 

.image { 
float:left; 
width: 50%; 
} 

img { 
width:100%; 
} 

a:focus { 
    //border: 1px solid black; 
    outline: none; 
    border-color: #9ecaed; 
    box-shadow: 0 0 10px #9ecaed; 
} 

.container { 
width:100%; 
} 

@media (max-width: 740px){ 
.image { 
width: 100%; 
} 
} 

div.scroller { 
overflow:scroll;  
} 
</style> 

Answer 1

あなたのセレクタが問題となっている。

$('div a:nth-child(' + (index - 1) + ')').focus();

これはdivのn番目の子を対象としていますが、各divには1つのaしかないので、ロジックには欠陥があります。 、

$('#Div1 div:nth-child(' + (index - 1) + ')').focus();

あなたは彼らに= 0（これは通常のタブ順序を維持tabindex属性を与えることによって、div要素をフォーカス可能にすることができます：それはこのように、親DIV（＃路Div1）のn番目の子としてdiv要素をターゲットとすべきフォーカスを受け取り、JSロジックを少しシンプルにします）。

ここcodepen作業です：返信用https://codepen.io/anon/pen/dVzoQK