Javascript 使用jQuery将html内容拆分为固定的高度和宽度div

我正在尝试将一个大的html页面分割成更小的固定高度和宽度的块（页面）

如果我知道页面数，这很容易-我可以先生成所需数量的页面，然后用源内容子项填充它们：

children = $('#source').children();
width = 600;
height = 600;

// already generated 'pages'
divs = $('.page');
$(divs).width(width);

pages = divs.length;
i = 0;

for (var c = 0; c < pages; ++c) {

    var div = $(divs).eq(c);

    while (i < children.length && div.height() < height) {
        $(children[i++]).clone().appendTo(div);
    }

    if(div.height() > height) {
        div.contents().last().remove();
        i--;
    }

}

children=$（'#source'）.children（）；
宽度=600；
高度=600；
//已生成“页面”
divs=$（'.page'）；
$（divs）.宽度（width）；
页数=divs.length；
i=0；
对于（变量c=0；c高度）{
div.contents（）.last（）.remove（）；
我--；
}
}

但是如果我不知道页数，我怎么能做同样的事情呢？ 如何使用$（'div.page'）包装内容并不断添加页面，直到内容结束

---

谢谢

您可能希望使用一个循环来不断创建页面/用内容填充页面，直到您到达某个端点，在那里您将打破循环。这里的关键是在循环中动态创建页面div。您可以使用

document.createElement

或仅使用$（“”）（或其他jQuery方式）。大概是这样的：

var i = 0;   
while(true) {
        if (content  /* have more content */) {
            var page = document.createElement("div");
            $(page).addClass('page');
            var children = $(content).children();
            while (i < children.length && div.height() < height) {
                $(children[i++]).clone().appendTo(page);
            }
            $(body).append(page);
        } else {
            break;
        }
    }

var i=0；
while（true）{
如果（内容/*有更多内容*/）{
var page=document.createElement（“div”）；
$（第页）.addClass（“第页”）；
var children=$（content.children（）；
而（i

如果您已经定义了要添加到每个“页面”的内容块，那么您可能还希望使用jQuery的each方法

---

如果需要更多帮助，请发表评论。

Universal CSS3支持无法很快到达这里。这只是示例代码。您需要确保if语句最终会失败（内容变为null或false或其他任何内容），并且您会点击break语句。或者，您可以（也可能应该）将检查移动到while循环中（

while（hascantent（））

）。正如我所说，这里的关键是动态地创建页面的div元素并添加它们，而不是将它们全部放在手边。