重新排序的jQuery的對象列表來我工作的功能列

，從HTML需要select和多列ul代替它 - 這是一個名單，但float:left;上li孩子，所以列數是基於在計算上（如果ul寬度是600和li寬度是200，我將顯然有3列）。重新排序的jQuery的對象列表來我工作的功能列

這就是理論 - 容易的部分。

例：5個項目，2列

現在，當我從選擇的數據，我有這樣的名單：

如果我只是把數組到ul，它的外觀像這樣在屏幕上：

1 2 
3 4 
5

但對於用戶/閱讀器，它更容易和更好的，當你不讀Left->Bottom，而是Bottom->Left，這意味着你正在閱讀直到列的底部，然後移動到下一列，而不是讀取行，然後是下一行。

所以我需要轉換列表的列：在ul

1 4 
2 5 
3

所以，在現實中會是這樣的順序：

1 4 2 5 3

而這需要與變量列號的工作，因爲如果我們決定添加10個項目列表，它可能看起來更好，更多的列。

任何有關所需操作員/週期和數學的幫助？

謝謝

來源

2010-02-18 Adam Kiss

我認爲這是一個有趣的問題，所以我爲你寫了一個插件。我測試了一下，它似乎工作。讓我知道這是你想要的！

http://jsbin.com/ocama/3/edit

http://jsbin.com/ocama/3

的算法是非常簡單，它非常簡單，只是歸結爲尋找有多少行是基於這個數字分組列。

來源

2010-02-18 17:51:42

這是非常好的：] – 2010-02-18 18:20:22

如果你知道有多少列有，那麼你會通過列表ñ一次跳躍讓你<li>元素。因此，對於三列，您選擇項目0,3,6 ...，然後回來，然後選擇1,4,7和2,5,8。

來源

2010-02-18 17:37:58 Pointy

樣的我在想什麼爲好。另一個可能是創建多個列表並將它們並排放置...相同的思維過程只是將第一個x放在第1列中，接下來的x +等等。 – 2010-02-18 17:40:46

我告訴有多少......我只是有點失去了如何選擇0,3,6和所有數學。現在解決：] – 2010-02-18 18:26:42

我做到了：]

我做了所有的調整。我也很喜歡Alex的解決方案，所以我給了他很好的答案，我在這裏添加我的解決方案只是爲尋找這樣那樣的問題:)

var rows= 2; //editable number of rows 

$('body').append('<ul id="fromselect"></ul>'); 
var o = $('select#tolist option'); 
var ul = $('ul#fromselect'); 

var total = o.size(); 
var onecol = Math.ceil(total/rows); 
var index = 0; //index in o list 

for (var j=1; j<=onecol;j++){ 
    for (var i=1;i<=rows;i++){ 
     if (!(i*j>total)){ //in last row, there might be less columns used 
      index = (i-1)*onecol+j-1; 
      ul.append('<li><a href="#">'+index +': '+ 
         o.eq(index).text() 
        +'</a></li>'); 
      //index is used more for debug, you can put 
      //the index calculation in o.eq(*) part 
     } 
    } 
}

來源

2010-02-18 18:26:03

重新排序的jQuery的對象列表來我工作的功能列

回答

相關問題