Wie automatisch paginieren hängt von der Containerhöhe in jquery ab

Question

Ich füge eine Fiedel hinzu, das wird eigentlich von angularjs gemacht, aber ich möchte das in jquery erstellen. Ich habe mehrere P-Tags. Diese funktionieren auf diese Weise (Seitenumbruch), aber nur in jQuery.

Mein Code ist

<div class="parent"> 
    <p>text1</p> 
    <p>text2</p> 
    <p>text3</p> 
    <p>text4</p> 
    <p>text5</p> 
    <p>text6</p> 
    <p>text7</p> 
    <p>text8</p> 
    <p>text9</p> 
    <p>text10</p> 
</div> 

Nur bitte die folgende Geige überprüfen. Ich möchte das gleiche für den obigen Code tun

https://jsfiddle.net/pjvdogoo/9/

Answer 1

  <div class="parent" id="parent" style="border: 2px solid blue; visibility: hidden;"> 
      <p>text1</p> 
      <p>text2</p> 
      <p>text3</p> 
      <p>text4</p> 
      <p>text5</p> 
      <p>text6</p> 
      <p>text7</p> 
      <p>text8</p> 
      <p>text9</p> 
      <p>text10</p> 
     </div> 

     <div id="heightTest" style=" border: 2px solid blue;"> 

     </div> 
     <script> 


     $(function() { 
      var $heightTest = $('#heightTest'); 

      var noOfParas = $("#parent").find("p").length; 

      var docHeight = $(document).height(); 
      var currentPage = 0; 

      var pageSize = docHeight/200; //approx para height 
      if(pageSize < 3) { 
       pageSize = 3; // displays atleast 3 paras at a time 
      } 


      var noOfPages = Math.round(noOfParas/pageSize); 

      var $p = $("#parent").find("p"); 
      var textChunk = new Array(); 
      var k =0; 

      for(i=0; i<noOfPages; i++) { 
       textChunk[i] = ""; 
       for(j=0; j<pageSize; j++) { 
        if(k<noOfParas) {        
         textChunk[i] += "<P>" + $('#parent > p:eq('+ k +')').html() + "</P>";              
        } 
        k++; 
       } 
      } 

      displayPage(currentPage); 


      function displayPage(page) { 
       $("#heightTest").empty(); 
       $("#heightTest").html(textChunk[page]); 

       //append pagination buttons 
       var thisPage = page+1; 
       var btnText = "<div style='text-align: center;'>"; 

       if(page !== 0) { 
        btnText = "<button id='previous'>Previous</button> "; 
       } 
       else { 
        btnText = "<button id='previous' disabled >Previous</button> "; 
       } 

       btnText += thisPage + "/" + noOfPages; 

       if(page!== noOfPages-1) { 
        btnText += " <button id='next'>Next</button>"; 
       } 
       else { 
        btnText += " <button id='next' disabled >Next</button>"; 
       } 

       btnText += "</div>"; 

       $("#heightTest").append(btnText); 

       currentPage = page; 
      } 

      $("#heightTest").on('click','#previous', function() { 
       if(currentPage !== 0){ 
        var newPage = currentPage - 1; 
        displayPage(newPage); 
       } 
      }); 

      $("#heightTest").on('click','#next', function() { 
       if(currentPage !== noOfPages+1){ 
        var newPage = currentPage + 1; 
        displayPage(newPage); 
       } 
      });     



      }); 

     </script>