將html內容拆分爲固定的高度和寬度的div與jQuery

我想將一個大的html頁面拆分成更小的固定高度和寬度的塊（頁面）。將html內容拆分爲固定的高度和寬度的div與jQuery

它很容易，如果我知道的網頁數 - 我可以首先生成所需數量的網頁，然後用源內容子女填補他們：

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'）包裝內容，並在內容結束前繼續添加頁面？

感謝

來源

2011-10-12 user763017

通用CSS3支持不能很快到達這裏。 – Blazemonger

您可能需要使用一個循環，以保持創建網頁/內容填充，直到你擊出了一些端點，在那裏你會跳出循環。這裏的關鍵是動態創建循環中的頁面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的每種方法。

評論是否需要更多幫助。

來源

2011-10-12 14:33:49 jtfairbank

謝謝，但它似乎像這個循環永遠不會結束。試圖找出爲什麼.. – user763017

它只是示例代碼。你需要確保你的if語句最終會失敗（內容變爲null或者false或者其他），並且你打破了break語句。或者，您可以（也可能應該）將檢查移至while循環（'while（hasContent（））'）。正如我所說，這裏關鍵的一點是，您正在動態創建頁面的div元素並添加它們，而不是先把它們全部製作完成。 – jtfairbank

明白了，謝謝！ – user763017

將html內容拆分爲固定的高度和寬度的div與jQuery

回答

相關問題