-2

我正在尝试为我的网站配置一个 jQuery 分页。我已经配置了一个基于计数<p>标签的分页。但要求是自定义分页。就像使用一些<!--pagebreak-->标签或类似的东西。如何使用 jQuery 和自定义<!--pagebreak-->标签进行自定义分页。<!--pagebreak-->请建议使用 jQuery 和自定义标签的任何分页脚本

<div class="storybody">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lobortis lacinia ante sit amet porta. Vivamus ut interdum massa. Etiam feugiat commodo accumsan. Suspendisse vulputate faucibus erat, non eleifend arcu iaculis et. Nulla at eros eu velit gravida ullamcorper nec id erat. In in velit mauris, vitae pretium purus. Ut scelerisque pellentesque fermentum. Curabitur nec mauris eu diam pulvinar cursus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse eu ipsum augue. Vivamus id elementum sem.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lobortis lacinia ante sit amet porta. Vivamus ut interdum massa. Etiam feugiat commodo accumsan. Suspendisse vulputate faucibus erat, non eleifend arcu iaculis et. Nulla at eros eu velit gravida ullamcorper nec id erat. In in velit mauris, vitae pretium purus. Ut scelerisque pellentesque fermentum. Curabitur nec mauris eu diam pulvinar cursus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse eu ipsum augue. Vivamus id elementum sem.</p>
    <!--pagebreak-->
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lobortis lacinia ante sit amet porta. Vivamus ut interdum massa. Etiam feugiat commodo accumsan. Suspendisse vulputate faucibus erat, non eleifend arcu iaculis et. Nulla at eros eu velit gravida ullamcorper nec id erat. In in velit mauris, vitae pretium purus. Ut scelerisque pellentesque fermentum. Curabitur nec mauris eu diam pulvinar cursus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse eu ipsum augue. Vivamus id elementum sem.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lobortis lacinia ante sit amet porta. Vivamus ut interdum massa. Etiam feugiat commodo accumsan. Suspendisse vulputate faucibus erat, non eleifend arcu iaculis et. Nulla at eros eu velit gravida ullamcorper nec id erat. In in velit mauris, vitae pretium purus. Ut scelerisque pellentesque fermentum. Curabitur nec mauris eu diam pulvinar cursus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse eu ipsum augue. Vivamus id elementum sem.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lobortis lacinia ante sit amet porta. Vivamus ut interdum massa. Etiam feugiat commodo accumsan. Suspendisse vulputate faucibus erat, non eleifend arcu iaculis et. Nulla at eros eu velit gravida ullamcorper nec id erat. In in velit mauris, vitae pretium purus. Ut scelerisque pellentesque fermentum. Curabitur nec mauris eu diam pulvinar cursus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse eu ipsum augue. Vivamus id elementum sem.</p>
    <!--pagebreak-->
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lobortis lacinia ante sit amet porta. Vivamus ut interdum massa. Etiam feugiat commodo accumsan. Suspendisse vulputate faucibus erat, non eleifend arcu iaculis et. Nulla at eros eu velit gravida ullamcorper nec id erat. In in velit mauris, vitae pretium purus. Ut scelerisque pellentesque fermentum. Curabitur nec mauris eu diam pulvinar cursus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse eu ipsum augue. Vivamus id elementum sem.</p>
</div>
4

2 回答 2

0

我自己做了一些事情。您可以检查 Jsfiddle 中的代码。我用过 Jquery1.3.2。和 jquery.pajinate.js。

HTML：

<div id="paging_container8" class="container">
                
                <div class="page_navigation"></div>
                <div class="storybody">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lobortis lacinia ante sit amet porta. Vivamus ut interdum massa. Etiam feugiat commodo accumsan. Suspendisse vulputate faucibus erat, non eleifend arcu iaculis et. Nulla at eros eu velit gravida ullamcorper nec id erat. In in velit mauris, vitae pretium purus. Ut scelerisque pellentesque fermentum. Curabitur nec mauris eu diam pulvinar cursus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse eu ipsum augue. Vivamus id elementum sem.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lobortis lacinia ante sit amet porta. Vivamus ut interdum massa. Etiam feugiat commodo accumsan. Suspendisse vulputate faucibus erat, non eleifend arcu iaculis et. Nulla at eros eu velit gravida ullamcorper nec id erat. In in velit mauris, vitae pretium purus. Ut scelerisque pellentesque fermentum. Curabitur nec mauris eu diam pulvinar cursus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse eu ipsum augue. Vivamus id elementum sem.</p>
                    <!--pagebreak-->
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lobortis lacinia ante sit amet porta. Vivamus ut interdum massa. Etiam feugiat commodo accumsan. Suspendisse vulputate faucibus erat, non eleifend arcu iaculis et. Nulla at eros eu velit gravida ullamcorper nec id erat. In in velit mauris, vitae pretium purus. Ut scelerisque pellentesque fermentum. Curabitur nec mauris eu diam pulvinar cursus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse eu ipsum augue. Vivamus id elementum sem.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lobortis lacinia ante sit amet porta. Vivamus ut interdum massa. Etiam feugiat commodo accumsan. Suspendisse vulputate faucibus erat, non eleifend arcu iaculis et. Nulla at eros eu velit gravida ullamcorper nec id erat. In in velit mauris, vitae pretium purus. Ut scelerisque pellentesque fermentum. Curabitur nec mauris eu diam pulvinar cursus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse eu ipsum augue. Vivamus id elementum sem.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lobortis lacinia ante sit amet porta. Vivamus ut interdum massa. Etiam feugiat commodo accumsan. Suspendisse vulputate faucibus erat, non eleifend arcu iaculis et. Nulla at eros eu velit gravida ullamcorper nec id erat. In in velit mauris, vitae pretium purus. Ut scelerisque pellentesque fermentum. Curabitur nec mauris eu diam pulvinar cursus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse eu ipsum augue. Vivamus id elementum sem.</p>
                    <!--pagebreak-->
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lobortis lacinia ante sit amet porta. Vivamus ut interdum massa. Etiam feugiat commodo accumsan. Suspendisse vulputate faucibus erat, non eleifend arcu iaculis et. Nulla at eros eu velit gravida ullamcorper nec id erat. In in velit mauris, vitae pretium purus. Ut scelerisque pellentesque fermentum. Curabitur nec mauris eu diam pulvinar cursus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse eu ipsum augue. Vivamus id elementum sem.</p>
                    </div>
                
                
            </div> ​

JavaScript

<script>
var str= $(".storybody").html();
var substr=str.split( "<!--pagebreak-->" );
var txt="<ul class='storycontent'><li>";
var x=0;
for (x in substr)
  {
    if(x==0){
        txt=txt+substr[x];
    }
    else{
          txt=txt+"</li><li>"+substr[x];
    }
  }
var paginated=txt+"</li></ul>";
$('div.storybody').replaceWith(paginated);

$(document).ready(function(){
                $('#paging_container8').pajinate({
                    num_page_links_to_display : 2,
                    items_per_page : 1 ,
                    item_container_id : '.storycontent'
                });
            });
​&lt;/script>
于 2012-09-04T16:38:51.807 回答
0

举个例子：

评论标签nodeType == 8基于您的输入，您可以通过以下方式阅读：

var el = []; //[2,3,1]

var sum = 0;

$(".storybody").contents().filter(function(){
    if($(this).is("p")) sum++; //how many p before a comment
    if(this.nodeType === 8){
        el.push(sum);
        sum = 0;
    }
});

例如，基于 el 数组，这可能是 next 和 prev 函数，但可以以更好的方式完成，但这只是一个示例；-)

//Next and Prev function
var curr = 0;
var k = 0;

$("#next").on("click", function(){
    if(curr < el.length){
        $(".storybody p").hide();
        var e = range(k, el[curr], ".storybody p", "next");
        $(e).each(function(){$(this).show()});                
        k += el[curr];                    
        curr++;
    }else{
        console.log("last page!");         
    }                  
});

$("#prev").on("click", function(){
    if(curr > 0){
        $(".storybody p").hide();
        var e = range(k, el[curr-1], ".storybody p", "prev");
        $(e).each(function(){$(this).show()});
        k -= el[curr-1];                    
        curr--;
    }else{
        console.log("first page!");         
    }
});


function range(s,e,sel,ac){

    if(ac == "next"){
        var elms = [];
        for(var i = s; i < (e+s); i++){
            elms.push($(sel).eq(i));
        }
    }else if(ac == "prev"){
        var elms = [];
        for(var i = (s-e); i < s; i++){
            elms.push($(sel).eq(i));
        }
    }
    return elms;
}

PS：假设我在<!--pagebreak-->p 标签的末尾添加了另一个（之前）

于 2012-09-04T08:12:02.550 回答