2009-07-08 40 views
3

這是一個挑戰問題/問題。希望你找到它。如何將一個很長的列變成多個較短的列?

情景:單列中有很長的列表(不合理地長)。它會更好地顯示在多個較短的列中。使用jQuery或其他工具,你會做什麼?

列表的格式如下:

<div class="toc"> 
    <dl> 
     <dt>item 1</dt> 
     <dd>related to 1</dd> 
     <dt>item 2</dt> 
     <dd>related to 2</dd> 
     <dt>item 3</dt> 
     <dd>related to 3</dd> 
     <dt>item 4</dt> 
     <dd>related to 4</dd> 
     <dt>item 5</dt> 
     <dd>related to 5</dd> 
     <dt>item 6</dt> 
     <dd>related to 6</dd> 
     <dt>item 7</dt> 
     <dd>related to 7</dd> 
     <dt>item 8</dt> 
     <dd>related to 8</dd> 
     <dt>item 9</dt> 
     <dd>related to 9</dd> 
     <dt>item 10</dt> 
     <dd>related to 10</dd> 
    </dl> 
</div> 

的警告:DD的可以含有嵌套分升的,DT的,& DD的。

此外一定要保持相關項目在同一列(即如果dt 7是col x,所以應該dd 7)。

這個問題的啓發來自於Zend Framework manual

編輯:查看下面的答案。

+0

不知道別人是否認爲這是禁忌,但我歡迎HOWTO! – Arjan 2009-07-08 19:06:23

+0

因爲您已經知道答案,所以我會用挑戰標記標記它。但那就是我。 – seth 2009-07-08 19:10:39

+0

@seth,完成。不知道有一個。 :) – 2009-07-08 19:12:33

回答

0

回答所以這個問題是不是它第一次出現更加困難。

我最初的想法是,我會在<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文檔和無盡的滾動。

1

我會做一個$(「dt」)數組的計數,那麼如果它超過了一定的大小注入一個關閉和打開,然後使用樣式將它們浮動到列中。

喬希

+0

關閉然後打開標籤將無法正常工作,但那也是我最初的方法。 – 2009-07-08 19:21:43

0

我會先寫一個JSON完整的數據,然後通過考慮這個總和爲總排量檢查DT的+ DD的+兒童達到相關的量。

然後我會檢查每列的預定義行數量並將此json劃分爲適當的部分。

最後從這部分我會創建列沒有打破相關項目。

思南。

相關問題