Question

我正在循环浏览一系列div，因此使用slice（）方法一次只能显示5个div。在每第4个项目之后，有一个省略号（...）链接，它直接引导用户到下一组5个项目。如果您感到困惑，这就是所有展示的外观，而不仅仅是5 ＆LT; 1 2 3 4 ... 5 6 7 8 ... 9 10 11 12 ... 13 14 15 16＆gt;

当用户点击后退箭头时，我希望显示前5个div。例如，如果它们位于第二组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文件动态创建的。不知道这是否相关。在每个第4个编号链接之后插入省略号链接，因为链接的数量非常多。对于小提琴，我只是为了简单起见将它添加到html中。

TL; DR
有没有办法向后使用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/

jQuery向后切片或选择前5个兄弟姐妹

1 个答案: