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

Question

我想将一个大的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--; 
    } 

} 

但我怎么可以做同样的事情，如果我不”吨知道页数？ 如何用$（'div.page'）包装内容，并在内容结束前继续添加页面？

感谢

Answer 1

您可能需要使用一个循环，以保持创建网页/内容填充，直到你击出了一些端点，在那里你会跳出循环。这里的关键是动态创建循环中的页面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; 
     } 
    } 

如果您已经定义了要添加到每个“页面”的内容块，您可能还想使用jQuery的每种方法。

评论是否需要更多帮助。