Перейти к следующему div не работает

Question

Я пробовал много тигров, чтобы перейти к следующему элементу div. Я использую Mousetrap для прослушивания ключей и проверки, есть ли выбранный элемент, тогда я пытаюсь найти следующий div, но похоже, что он не может найти какие-нибудь идеи?

HTML (Есть много этого сНу элемента):

<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

Я попытался, как выяснить, решение, в следующем фрагменте кода мой код.

Точки интереса являются:

• Чтобы выбрать элемент с двумя классами вам нужно перейти от $('.item-flip selected') к $('.item-flip.selected')

• Чтобы получить следующий элемент, который нужно найти отца clossest Див и затем найдите элемент-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>