jQuery切片向后或选择以前的5个同胞

我骑着一系列的div，因此每次只有5个使用slice（）方法出现。每隔4个项目之后，都会有一个省略号（...）链接，它将直接引导用户下一组5个项目。如果你感到困惑，以下就是全部展示的样子，而不仅仅是5。
< 1 2 3 4 ... 5 6 7 8 ... 9 10 11 12 ... 13 14 15 16>jQuery切片向后或选择以前的5个同胞

当用户点击返回箭头，我想前面的5个div的显现。例如，如果它们在第二组5（div 5,6,7,8，...）上，单击后退箭头将隐藏这些并显示前5（div 1,2,3,4，...）。 ..）。我不认为slice（）向后工作，并且prev（）将不起作用，因为我不知道选择前5个兄弟的方法。 N-child不会工作，因为我想选择前5个而不仅仅是：第n个孩子（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文件。不知道这是否相关。由于链接的数量非常大，因此省略号链接将在每第4个编号的链接之后插入。为了简单起见，我只是将它添加到html中。

TL; DR
有没有办法使用jQuery的slice（）方法向后或使用不同的方法选择前5个兄妹的方法吗？

来源

2016-09-15 christine

我的头未经测试的顶部，使用代码你已经有了，或许是这样的：'$（“.btn-num”）。hide（）。slice（（num-4），num）.show（）'可能需要-5和-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/

来源

2016-09-15 20:37:50

这工作！非常感谢你，乔。 – christine

jQuery切片向后或选择以前的5个同胞

回答

相关问题