Question

可以说我的网站上有很多页面：

<div class="caja_paginas">
    <ul class="paginas"> 
        <li class="actual"><a href="/?tipo=links&amp;que=ultimas&amp;page=1">1</a></li>
        <li><a href="/?tipo=links&amp;que=ultimas&amp;page=2">2</a></li>
                <li><a href="/?tipo=links&amp;que=ultimas&amp;page=3">3</a></li>
                <li><a href="/?tipo=links&amp;que=ultimas&amp;page=4">4</a></li>
                <li><a href="/?tipo=links&amp;que=ultimas&amp;page=5">5</a></li>
                <li><a href="/?tipo=links&amp;que=ultimas&amp;page=6">6</a></li>
                <li><a href="/?tipo=links&amp;que=ultimas&amp;page=7">7</a></li>
                <li><a href="/?tipo=links&amp;que=ultimas&amp;page=8">8</a></li>
                <li><a href="/?tipo=links&amp;que=ultimas&amp;page=9">9</a></li>
          <!-- commented but i have like 1420 pages lol -->
         </ul>
</div>

我需要让它更漂亮（你可以查看http://goo.gl/DO1do）

所以我在想做类似的事情：

$(document).ready(function(){
    $('.caja_paginas ul.paginas li').hide();
    $('.caja_paginas ul.paginas li.actual').show();
    $('.caja_paginas ul.paginas li.actual').next('li').show();
    $('.caja_paginas ul.paginas li.actual').prev('li').show();
    $('.caja_paginas ul.paginas li').last().html('last').show();
});

这看起来像

[1] [2] [last] //当实际/当前为[1]时

或

[9] [10] [11] [last] //何时是[10];等等

但我怎么能让它看起来

[1] [2] [下一个] [..] [最后]

或

[上] [..] [9] [10] [11] [下一个] [..] [最后]

分别？

或者你有更好的主意

-edit -

我编辑了一下代码，看起来更好

    $(document).ready(function ()
{
    var actual = $(".caja_paginas ul.paginas li.actual a").text();
    var actual_html = $(".caja_paginas ul.paginas li.actual").html();
    var ultima = $(".caja_paginas ul.paginas li a").last().text();
    var actual_html = $(".caja_paginas ul.paginas li.actual").last().html();
    $(".caja_paginas #ellipsis").remove();
    $(".caja_paginas ul.paginas li").hide();
    $(".caja_paginas ul.paginas li.actual").show();
    $(".caja_paginas ul.paginas li.actual").next("li").show().after('<li id="ellipsis">...</a></li>');
    $(".caja_paginas ul.paginas li.actual").prev("li").show();
    $(".caja_paginas ul.paginas li").first().show();
    if (actual > 4)
    {
        $(".caja_paginas ul.paginas li").first().after('<li id="ellipsis">...</a></li>');
        $(".caja_paginas ul.paginas").prepend("<li>" + $(".caja_paginas ul.paginas li.actual").prev().html() + "</li>");
        $(".caja_paginas ul.paginas li a").first().text("<")
    }
    $(".caja_paginas ul.paginas li").last().show();
    $(".caja_paginas ul.paginas").append("<li>" + $(".caja_paginas ul.paginas li.actual").next().html() + "</li>");
    $(".caja_paginas ul.paginas li a").last().text(">")
});

可在此处测试/修改：http://jsfiddle.net/q2WBG/1/

PD：对于搜索引擎优化条款，我想对HTML中的页面进行alllinks

Answer 1

这样的事情应该有效。

$(document).ready(function(){
    // Remove for in case you want to update it ever with JS
    $('.caja_paginas #ellipsis').remove();
    $('.caja_paginas ul.paginas li').hide();
    $('.caja_paginas ul.paginas li.actual').show();
    $('.caja_paginas ul.paginas li.actual').next('li').show().append('<li id="ellipsis">...</a></li>');
    $('.caja_paginas ul.paginas li.actual').prev('li').show();
    $('.caja_paginas ul.paginas li').last().html('last').show();
});

使用Jquery使分页更漂亮

1 个答案: