jquery - Jquery 显示选定的元素

Question

我使用underscore.js设计了一个模板，它遍历一个分页变量并显示相应数量的链接。代码是：

<% var paginate= 10 %>

<table>
    <tr>
        <td><a href="">&lt;</a></td>
        <% for(var i=0; i < paginate; i++){ %>

            <td>
                <a class="someclass" href="<%= i%>"><%= i%></a>
            </td>

        <% }%>
        <td><a href="">&gt;</a></td>
    </tr>
</table>

调用后我得到了这个结果：

我想以5 的块显示链接。像“<0 1 2 3 4>”或“<4 5 6 7 8 9>”。

如何使用 jQuery 只显示 5 个并隐藏其余部分？请指教。

Answer 1

看看这个解决方案。这是一个演示解决方案，您可以对其进行改进以满足您的要求。

var slide  = 0;
$('.page:gt(4)').hide();
$('.prev').hide();
if(len < 5) {
    $('.next').hide();
}

$('.prev a').on('click', function(e){
    e.preventDefault();

    slide--;
    var heigher= slide * 5 + 5;
    var lower = slide * 5;

    $('.page:gt(' + (heigher-1) + ')').hide();
    $('.page:lt(' + (heigher) + '):gt(' + (lower) + ')').show();
    $('.page:eq(' + (lower) + ')').show();

    if(slide == 0){
        $('.prev').hide();
    }
    if(len > 5){
        $('.next').show();
    }
});

$('.next a').on('click', function(e){
    e.preventDefault();

    var lower = slide * 5 + 5;
    slide++;
    var heigher = slide * 5 + 5;

    $('.page:lt(' + lower + ')').hide();
    $('.page:lt(' + (heigher) + '):gt(' + (lower-1) + ')').show();

    if(heigher >= len){
        $('.next').hide();
    }
    $('.prev').show();
});

我在这里有一个更新解决方案，我相信它有一个更好的 jQuery 代码。