OnlyForSimple OnlyForSimple - 5 months ago 10
jQuery Question

Navigate to next div not working

I tried many thigs to navigate to next div element I'm using Mousetrap for key listener and checking if there is selected item then I'm trying to find the next div but seems like can't find anything any ideas?

HTML (There are many of this div item):

<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

I tried how to figure out a solution, in the snippet my proposal:

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