jquery prev и next смежный sibling

Question

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

это моя скрипка http://jsfiddle.net/hhebhm66/

var $curr = $("div.active"); 

    $(".prev").click(function() { 

    if ($($curr).is(':first-child')){ 
     $('.prev').hide(); 
    }else{ 
     $('.next').show(); 
     $curr = $curr.prev(); 
     $("div").removeClass('active'); 
     $curr.addClass('active'); 

    } 
    }); 


    $(".next").click(function() { 

    if ($($curr).is(':last-child')){ 
     $('.next').hide(); 
    }else{ 
     $('.prev').show(); 
     $curr = $curr.next(); 
     $("div").removeClass('active'); 
     $curr.addClass('active'); 

    } 
    }); 

Answer 1

Ваша логика может быть улучшена путем простого использования prev() или next() и проверки того, что элемент был получен. Если бы это было не так, то просто установите first() или last() сингл div в комплекте. Попробуйте это:

$(".prev").click(function() { 
    var $active = $('.active').removeClass('active'); 
    var $prev = $active.prev('div'); 
    if ($prev.length == 0) 
      $prev = $active.siblings('div').last(); 
    $prev.addClass('active'); 
}); 


$(".next").click(function() { 
    var $active = $('.active').removeClass('active'); 
    var $next = $active.next('div'); 
    if ($next.length == 0) 
      $next = $active.siblings('div').first(); 
    $next.addClass('active'); 
}); 

Example fiddle

Answer 2

Возможно использование индекса для активного элемента йота бы еще проще:

var index = 5; 
 

 
$('button').click(function() { 
 
    var lastIndex = index; 
 
    index += this.className == 'prev' ? -1 : 1; 
 
    var thisChild = $('div:nth-child(' + index + ')'); 
 
    if (thisChild.get(0)) { 
 
    $('.active').removeClass('active'); 
 
    thisChild.addClass('active'); 
 
    } else { 
 
    index = lastIndex; 
 
    } 
 
});

div { 
 
    width: 40px; 
 
    height: 40px; 
 
    margin: 10px; 
 
    float: left; 
 
    border: 2px blue solid; 
 
    padding: 2px; 
 
} 
 
span { 
 
    font-size: 14px; 
 
} 
 
p { 
 
    clear: left; 
 
    margin: 10px; 
 
} 
 
.active { 
 
    background-color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div></div> 
 
<div></div> 
 
<div></div> 
 
<div class='active'></div> 
 
<div></div> 
 
<div></div> 
 
<div></div> 
 
<div></div> 
 
<p> 
 
    <button class='prev'>Go to Prev</button> 
 
</p> 
 
<p> 
 
    <button class='next'>Go to next</button> 
 
</p>

Answer 3

Try, чтобы показать/скрыть блоки перед проверкой для первого/последнего. Также лучше обернуть блоки в общий контейнер, чтобы избежать случайной итерации на нерелевантных братьях и сестрах.

var $blocks = $('.blocks > div'), 
 
    $curr = $blocks.filter(".active"); 
 

 
$(".prev").click(function() { 
 
    $curr = $curr.prev(); 
 
    $blocks.removeClass('active'); 
 
    $curr.addClass('active'); 
 
    
 
    if ($curr.is(':first-child')) { 
 
     $('.prev').hide(); 
 
    } 
 
    else $('.next').show(); 
 
}); 
 

 

 
$(".next").click(function() { 
 
    $curr = $curr.next(); 
 
    $blocks.removeClass('active'); 
 
    $curr.addClass('active'); 
 
    if ($curr.is(':last-child')) { 
 
     $('.next').hide(); 
 
    } 
 
    else $('.prev').show(); 
 
});

.blocks div { 
 
    width: 40px; 
 
    height: 40px; 
 
    margin: 10px; 
 
    float: left; 
 
    border: 2px blue solid; 
 
    padding: 2px; 
 
} 
 
p { 
 
    clear: left; 
 
    margin: 10px; 
 
} 
 
.active { 
 
    background-color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="blocks"> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div class='active'></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
</div> 
 

 
<p> 
 
    <button class='prev'>Go to Prev</button> 
 
</p> 
 
<p> 
 
    <button class='next'>Go to Next</button> 
 
</p>