js點擊更多顯示更多內容效果

我寫了一個簡單的分段顯示插件，
用法很簡單：
1，把你要分面顯示的內容的容器元素增加一個class=showMoreNChildren,並增加一個自定義屬性pagesize="8" 這種
這個pagesizie有一個默認值10。可以不寫
如

<ul class="showMoreNChildren" pagesize="5">
            <li>a</li>
            <li>b</li>
            <li>c</li>
            <li>d</li>
            <li>e</li>
            <li>f</li>
            <li>g</li>
            <li>h</li>
            <li>i</li>
            <li>j</li>
            <li>k</li>
            <li>m</li>
</ul>

2,頁面尾部引用這個插件js文件(在之前要先引入jquery)
   <script type="text/javascript"  src="js/jquery.showmorechildren.js"></script>
js代碼如下

(function () {
                var showMoreNChildren = function ($children, n) {
                    //顯示某jquery元素下的前n個隱藏的子元素
                    var $hiddenChildren = $children.filter(":hidden");
                    var cnt = $hiddenChildren.length;
                    for ( var i = 0; i < n && i < cnt ; i++) {
                        $hiddenChildren.eq(i).show();
                    }
                    return cnt-n;//返回還剩余的隱藏子元素的數量
                }
 
                //對頁中現有的class=showMorehandle的元素，在之后添加顯示更多條，並綁定點擊行為
                $(".showMoreNChildren").each(function () {
                    var pagesize = $(this).attr("pagesize") || 10;
                    var $children = $(this).children();
                    if ($children.length > pagesize) {
                        for (var i = pagesize; i < $children.length; i++) {
                            $children.eq(i).hide();
                        }
          
                        $("<div class='showMorehandle' >顯示更多</div>").insertAfter($(this)).click(function () {
                            if (showMoreNChildren($children, pagesize) <= 0) {
                                //如果目標元素已經沒有隱藏的子元素了，就隱藏“點擊更多的按鈕條”
                                $(this).hide();
                            };
                        });
                    }
                });
            })();