如何进行自定义分页[关闭]

Question

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

<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>

Answer 1

我自己做了一些事情。您可以查看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'
                });
            });
​</script>

Answer 2

举例：

评论标签是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：假设我在 p 标签的末尾（之前）添加了另一个 <!--pagebreak-->