Javascript 在jquery中如何根据容器高度自动分页

我添加了一个提琴，实际上这是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>

文本1

文本2

文本3

文本4

文本5

文本6

文本7

文本8

文本9

文本10

请检查一下下面的小提琴。我想对上面的代码做同样的操作

文本1

文本2

文本3

文本4

文本5

文本6

文本7

文本8

文本9

文本10

$（函数（）{
变量$heightTest=$（“#heightTest”）；
var noOfParas=$（“#父项”）.find（“p”）.length；
var docHeight=$（document）.height（）；
var-currentPage=0；
var pageSize=docHeight/200；//大约段落高度
如果（页面大小<3）{
pageSize=3；//一次至少显示3个段落
}
var noOfPages=Math.round（noOfParas/pageSize）；
var$p=$（“#父项”）。查找（“p”）；
var textcunk=新数组（）；
var k=0；
对于（i=0；i
            <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>