jQuery slice назад или выберите предыдущие 5 братьев и сестер

Question

Я проезжаю через серию div, поэтому только 5 появляются за раз, используя метод slice(). После каждого 4-го элемента есть ссылка с эллипсисом (...), которая напрямую приводит пользователя к следующему набору из 5 элементов. Вот как это выглядело бы со всеми показами, а не с 5, если вы смущены.
< 1 2 3 4 ... 5 6 7 8 9 ... 10 11 12 ... 13 14 15 16>

Когда пользователь нажимает на стрелку назад, я хочу предыдущие 5 дивы, чтобы показать. Например, если они находятся во втором наборе из 5 (div 5, 6, 7, 8, ...), нажатие на стрелку назад скроет их и покажет предыдущие 5 (div 1, 2, 3, 4,. ..). Я не думаю, что slice() работает в обратном порядке, а prev() не будет работать, так как я не знаю, как выбрать предыдущих 5 братьев и сестер. Nth-child не будет работать, потому что я хочу выбрать предыдущие 5, а не только: nth-child (5n).

Любые мысли о том, как это может работать? Я в тупике. Я не JQuery Jedi, но я бы сказал, что мой текущий уровень навыков выше новичка. Я, вероятно, делаю функциональность более сложной, чем она должна быть. Я сделал скрипку, показывая, что я уже сделал.
https://jsfiddle.net/nehLuj98/

$(".btn-nav").slice(0,5).show(); 
$(".btn-ellipsis").each(function(){ 
    var goNum = $(this).prev(".btn-num"); 
    var num = Number(goNum.attr("id")); 
    var currentNum = $(this).find(".current"); 
    $(this).click(function(){ 
     $(this).hide(); 
     $(".btn-num").hide().slice(num,(num+4)).show().next(".btn-ellipsis").show(); 
     $(this).next(".current").removeClass("current"); 
     $(".btn-num").hide().slice(num,(num+4)).show().next(".btn-ellipsis").show(); 
     goNum.add("#"+(num+1)+"").addClass("current"); 
    }); 
    $(".btn-prev").click(function(){ 
     //Here's where I'd like to add the functionality to show the previous 5 items 
     //$(".btn-nav").add(".btn-ellipsis").hide(); 
    }); 
}); 

Я использую AngularJS, так что эти цифры создаются динамически на основе файла .json. Не знаю, насколько это важно или нет. Эллиптическая связь вставляется после каждой четвертой нумерованной ссылки, потому что количество ссылок может очень сильно. Для скрипки я просто добавил ее в html для простоты.

TL; DR
Есть ли способ использовать кусочек JQuery в() метод назад или выбрать предыдущие 5 братьев и сестер, используя другой метод?

Answer 1

Основываясь на текущем коде, вы можете сделать это:

$(".btn-prev").click(function(){ 
    if ($('.current').attr('id') === '1' || $('.current').attr('id') === '4') 
    return; 
    var currentElip = $('.btn-ellipsis:visible'); 
    if (!currentElip.length) 
    currentElip = $('.btn-next'); 
    else 
    currentElip.hide(); 
    var goNum = currentElip.prevAll('.btn-ellipsis').prev(".btn-num"); 
    var num = Number(goNum.attr("id")); 
    $(".btn-num").hide().slice(num-4,(num)).show().next(".btn-ellipsis").show(); 
    $(".current").removeClass("current"); 
    $("#"+(num)).addClass("current"); 
}); 

Вот скрипку с некоторыми комментариями:

https://jsfiddle.net/nehLuj98/10/