重新排序的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的对象列表来我工作的功能列

回答

相关问题