jQuery 슬라이스 뒤로 또는 이전 형제 5 개 선택

Question

일련의 div를 순환하므로 slice() 메소드를 사용하여 한 번에 5 개만 표시됩니다. 매 4 번째 항목마다 줄임표 (...) 링크가있어 사용자를 다음 5 개 항목으로 직접 연결합니다. 당신이 혼란스러워하는 경우를 대비해서 5가 아니라 모든 것을 보여줄 것입니다. 사용자가 다시 화살표를 클릭 할 때
< 1 2 3 4 ... 5 6 7 8 10 11 ... 12 ... 9>

14 15 16 13 I는 이전 5 명 div에 표시 할. 예를 들어, 두 번째 5 세트 (div 5, 6, 7, 8, ...)에있는 경우 뒤로 화살표를 클릭하면 해당 화살표가 숨겨져 이전 5 개가 표시됩니다 (div 1, 2, 3, 4,. ..). 슬라이스()가 거꾸로 작동하지 않는다고 생각하고 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

, 당신이 할 수 있습니다 : 테스트없이 내 머리 위로 떨어져

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