htmlコンテンツを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の各メソッドを使用することをお勧めします。

コメントが必要な場合は、