jQuery隐藏分页元素答案

【问题标题】：jQuery hiding pagination elements [closed]jQuery隐藏分页元素
【发布时间】：2014-09-14 14:06:52
【问题描述】：

我正在使用 twitter 引导程序。我想要实现的是，当有很多页面要在分页内放置“...”按钮时，每次用户单击它都会向分页容器添加 5 个页面。

看看http://jsfiddle.net/sqd12tr3/ 如你所见有 58 页。我想要实现的是显示 5 个页面和 ... 按钮。当我单击它时，它会增加 5 个页面。依此类推，最后，当它达到 58 ... 按钮时消失。另一件事是，例如，如果第 10 个 li 处于活动状态，则默认情况下必须显示直到活动 li 的页面 (lis)。

我怎样才能达到这个结果？

【问题讨论】：

这样的？ jsfiddle.net/zk5hemju不是100%清楚你想要什么
大量的寻呼机插件，建议你研究一下
@charlietfl 没有。当用户进入页面时，分页必须是这样的：1,2,3,4,5, ...当你按下...时，接下来会出现5个元素但是，不要删除以前的元素。当您第一次初始化时，请使用 active 类查找 li。默认情况下，必须显示所有处于活动状态的lis。
得到一个插件，没有必要重新发明轮子。我可以看到开始这项工作，然后被要求继续为其添加功能和行为。
很好的要求。你自己尝试过吗？

标签： javascript jquery html twitter-bootstrap hide

【解决方案1】：

我觉得玩这个很有趣。感谢您的发布。我在<ul> 的末尾添加了<li> 和class='ellipses'，并使用了以下jQuery：

var pages = $('.pagination li').not('.ellipses');
var pagesVisible = 0;
var show = function(numToShow) {
    numToShow += 1;
    $('.pagination li').removeAttr('style');
    $('.pagination li:nth-child(n + ' + numToShow + ')').not('.ellipses').hide();

    var hiddenPages = $('.pagination li[style="display: none;"]');
    if (hiddenPages.length === 0)
    {
        $('.ellipses').remove();
    }
    pagesVisible = pages.length - hiddenPages.length;
};

$('.ellipses').click(function() {
    show(pagesVisible + 5);
});

var activePage = $('.pagination li.active').index();
var numToShow = activePage + (5 - (activePage % 5));
show(numToShow);

在 JSFiddle 上查看 DEMO。

【讨论】：