次のdivに移動しない

Question

私は次のdiv要素に移動するために多くのthigsを試しました。私はキーリスナーにMousetrapを使用しています。選択された項目があるかどうかを確認しています。任意のアイデアを見つけますか？

HTML（このdivの項目の多くがあります）：

<div class="item"> 
<a href="#"> 
    <div class="item-flip"> 
     <div class="item-inner"> 
      <img src="#"> 
     </div> 
      <div class="item-details"> 
       <div class="item-details-inner"> 
        <div class="down-details"> 
        <div class="rating" data-content="9.5"> 
        <i class="icon icon-star"></i>9.5 
        </div> 
        <span class="year">2011</span> 
        <span>Go</span> 
       </div> 
      </div> 
     </div> 
    </div> 
</a> 
</div> 

Javascriptを

Mousetrap.bind("right", function() { 
    if($('.item-flip selected').length){ 
     var current = $('.item-flip selected'); 
     $('.selected').removeClass('selected'); 
     var el = current.next(); 
     el.addClass('selected'); 
    } 
    else{ 
     $('.item-flip').first().addClass('selected') 
    } 
}); 

Answer 1

私は以下の私のスニペットのコードでは、ソリューションを把握する方法を試みました。

関心のポイントは以下のとおりです。

• あなたはclossestのdivの父親を見つける必要がある次の要素を取得するには$('.item-flip.selected')

• に$('.item-flip selected')から変更する必要がある2つのクラスを持つ要素を選択すると、 item-flip divを検索します。だから、var el = current.next();からあなたに変更する必要があります：var el = current.closest('.item').next().find('.item-flip');

$(function() { 
 
    Mousetrap.bind("right", function(e) { 
 
    if($('.item-flip.selected').length){ 
 
     var current = $('.item-flip.selected'); 
 
     $('.selected').removeClass('selected'); 
 
     var el = current.closest('.item').next().find('.item-flip'); 
 
     el.addClass('selected'); 
 
    } 
 
    else{ 
 
     $('.item-flip').first().addClass('selected') 
 
    } 
 
    }); 
 
});

.selected { 
 
    background-color: red; 
 
}

<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script> 
 
<script src="https://rawgit.com/ccampbell/mousetrap/master/mousetrap.js"></script> 
 

 
<div class="item"> 
 
    <a href="#"> 
 
     <div class="item-flip"> 
 
      <div class="item-inner"> 
 
       <img src="#"> 
 
      </div> 
 
      <div class="item-details"> 
 
       <div class="item-details-inner"> 
 
        <div class="down-details"> 
 
         <div class="rating" data-content="9.5"> 
 
          <i class="icon icon-star"></i>9.5 
 
         </div> 
 
         <span class="year">2011</span> 
 
         <span>Go</span> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </a> 
 
</div> 
 
<div class="item"> 
 
    <a href="#"> 
 
     <div class="item-flip"> 
 
      <div class="item-inner"> 
 
       <img src="#"> 
 
      </div> 
 
      <div class="item-details"> 
 
       <div class="item-details-inner"> 
 
        <div class="down-details"> 
 
         <div class="rating" data-content="9.5"> 
 
          <i class="icon icon-star"></i>9.5 
 
         </div> 
 
         <span class="year">2011</span> 
 
         <span>Go</span> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </a> 
 
</div> 
 
<div class="item"> 
 
    <a href="#"> 
 
     <div class="item-flip"> 
 
      <div class="item-inner"> 
 
       <img src="#"> 
 
      </div> 
 
      <div class="item-details"> 
 
       <div class="item-details-inner"> 
 
        <div class="down-details"> 
 
         <div class="rating" data-content="9.5"> 
 
          <i class="icon icon-star"></i>9.5 
 
         </div> 
 
         <span class="year">2011</span> 
 
         <span>Go</span> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </a> 
 
</div>