jQuery向后切片或选择前面的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个div。例如，如果它们位于第二组5 (div 5、6、7、8、.)上，单击后箭头将隐藏这些箭头并显示前5 (div 1、2、3、4、.)。我不认为slice()向后工作，而prev()也不能工作，因为我不知道选择前5个兄弟姐妹的方法。Nth-child也不能工作，因为我想选择前面的5，而不仅仅是:nth-child(5n)。

对这是怎么回事有什么想法吗？我很困惑。我不是jQuery绝地，但我要说我目前的技能水平高于初学者。我可能正在使功能变得比需要的更复杂。我已经做了一把小提琴，展示了我已经完成的工作。

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；博士

是否有办法向后使用jQuery的slice()方法，或者使用不同的方法选择前面的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/