如何自动分页取决于jQuery中的容器高度

Question

i a'm添加小提琴，实际上是由angularjs制成的，但是我想在jQuery中创建它。我有几个p标签。这些会像这样（分页），但仅在jQuery中工作。

我的代码是

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

请检查以下小提琴。我想为上述代码做同样的事情

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>