Javascript 为：gt或：lt选择器设置变量零基数

我认为对于比我更了解jQuery的人来说，这可能是一个简单的补充。但我有一个基于这段代码的导航：

无论当前页面是哪一个，在该代码的li元素（第4个li元素）中将有一个“活动”类。但是我想将：gt和：lt选择器的零基设置为“活动”元素。本质上，无论您在哪个页面上，其标题都将显示为第一个li元素，您可以单击“上一页”或“下一页”以访问前面或后面列出的内容。这有意义吗

此外，第2部分将仅显示“previous”链接，前提是实际上有一些以前的内容要访问。提前感谢您的帮助

HTML:

这里的解决方案：

研究使用jQuery，而不是选择上一个和下一个元素

就我个人而言，我宁愿使用类而不是显示和隐藏

基本思想：

添加附加逻辑：

检查起点和终点是否在范围内，如果不在范围内，则向左或向右填充，以便始终显示正确的数字数

function showRange() {

    var range = 4;
    var lis = $("#pages li");

    if (lis.length > range) {

        var activeIndex = lis.filter(".active").index();
        var liCount = lis.length - 1;

        var start = activeIndex - (range / 2);
        var end = activeIndex + (range / 2);

        if (start < 0) {
            end -= start;
            start = 0;
        } else if (end >= liCount) {
            start += liCount - end;
            end = liCount;
        }

        lis.filter(".show").removeClass("show");
        lis.slice(start, end + 1).addClass("show");

    }
}

工作示例：

---

谢谢我想知道我是否使用了：gt。。。你能帮我再修改一下吗？基本上，我不需要prev/next按钮来选择下一个项目，我实际上需要它们转到下五个列表项目，有点像原始小提琴的分页。因为如果用户单击其中一个元素，它将刷新页面，将单击的元素更改为活动元素，并希望将该活动元素作为列表中的第一项，然后从那里来回翻页。我的朋友，你太棒了。这完全解决了问题！谢谢你的帮助。事实上，还有一件事。您知道如何解决如果活动元素在距离结束的五个范围内，它将添加“show”类，使其填充五个插槽。示例：活动元素是最后一个li元素-在页面加载时，它将只显示一个导航元素，理想情况下，它还将显示前面的四个元素。我不知道该怎么做，因为这是我第一次摆弄“切片”。非常感谢您的帮助。如果计数>长度，请从索引中减去差值。

$('ul li:gt(4)').hide();

$('.prev').click(function() {
var first = $('ul').children('li:visible:first');
first.prevAll(':lt(5)').show();
first.prev().nextAll().hide()
});

$('.next').click(function() {
var last = $('ul').children('li:visible:last');
last.nextAll(':lt(5)').show();
last.next().prevAll().hide();
});

var lis = $("li");
var index = lis.filter(".active").index();
var start = index-2;
var end = index+3;
lis.removeClass("show").slice(start,end).addClass("show");

function showRange() {

    var range = 4;
    var lis = $("#pages li");

    if (lis.length > range) {

        var activeIndex = lis.filter(".active").index();
        var liCount = lis.length - 1;

        var start = activeIndex - (range / 2);
        var end = activeIndex + (range / 2);

        if (start < 0) {
            end -= start;
            start = 0;
        } else if (end >= liCount) {
            start += liCount - end;
            end = liCount;
        }

        lis.filter(".show").removeClass("show");
        lis.slice(start, end + 1).addClass("show");

    }
}