回答所以這個問題是不是它第一次出現更加困難。
我最初的想法是,我會在<table><tr><td></td></tr></table>
包列,然後每隔n 父 DD輸出</td><td>
後,簡單,除非你不能真的輸出這樣的結束標記,最終當你寫$('</td><td>').after('.toc > dl > dd')
時,你將創建節點 - 這是開始和結束的節點標籤。由於你必須創建節點,瀏覽器將忽略第一個結束標記
好吧,讓我們假設你以某種方式解決這個問題。你是什麼迭代條件?我的第一個嘗試是構建一個for循環。這似乎是合理的。對於每個父親dd,做任何你需要做的事情。但是,你如何在jQuery中構造這些條件?你有小於,大於,等於。但你沒有大於或等於(> =)或小於或等於(< =),這是一個關鍵的區別。
您可以嘗試這樣的事:
for (i = 0; i < len; i+=40) { // where 40 determines the # per col
get elements i thru i+40;
wrap this set and float left
}
因此,如何將你的jQuery做到這一點?
// note that you must use > to prevent nested descendants from being selected
var len = jQuery('.toc > dl > dd').size()
for (i = 0; i < len; i+=40) {
// this selector says give me the first 40 child elements
// whatever type of element they may be
$('.toc > dl > *:gt('+i+'):lt('+(i+40)').wrapAll('<div style="float:left">');
// however because we don't have >= and :gt won't accept negatives as an input
// we must either do a special case for the first iteration
// or construct a different selector
$('.toc > dl > *:eq('+i+')', ' +
'.toc > dl > *:gt('+i+'):lt('+(i+40)')
.wrapAll('<div style="float:left">');
}
你也可以做一些與jQuery的add()方法,以每次迭代的第一個元素添加到您的設置,但您必須在您的選擇保持文檔順序或jQuery將重新設定的,所以你要先做。
最終,for循環最初是有意義的,但它遇到了挑戰性選擇器的問題。當然,我們並沒有使用$('selector').each(function() { });
構造,因爲只有當我們可以輸出獨立的結束標記時它纔有用。
那麼我最終得到了什麼? 最終的答案:
$('.toc').after('<div id="new"></div>');
do {
var curSet = $('.toc > dl > *:lt(40)')
.appendTo('#new').wrapAll('<div style="float:left"></div>');
} while (curSet.size());
這種方法追加舊後新的股利。然後迭代抓取前40個元素,並將它們附加到一個div中,然後將它們附加到新div中,該div將向左浮動,只要有剩餘元素可以抓取即可循環,並保持順序。
在你搞清楚之後不會非常複雜,但是在整個問題中有幾個問題我希望你覺得有趣。我做到了。
要徹底完成最終目標使得文檔顯著更加有用的:
我加了一些風格和使用的DT的作爲togglers展現DD的。我還使用了一個簡單的PHP代理包裝器(5-10 LOC),這樣我就可以通過ajax調用來引入任何給定的,所需的文檔頁面,而無需使用遠程Ajax警告。
我結束了一個可愛的小文件中單,通航頁加載在< 2秒(和使用Ajax加載的所有後續網頁< 1秒),而不是一個可怕的網頁,需要15-20秒加載每頁!
問題解決。更多的東西愉快和有用的10-15行的JavaScript(與重新整理,切換,和AJAX代碼總),< 10行PHP和一些樣式規則。
沒有更多的慢Zend文檔和無盡的滾動。
不知道別人是否認爲這是禁忌,但我歡迎HOWTO! – Arjan 2009-07-08 19:06:23
因爲您已經知道答案,所以我會用挑戰標記標記它。但那就是我。 – seth 2009-07-08 19:10:39
@seth,完成。不知道有一個。 :) – 2009-07-08 19:12:33