Question

我正在处理函数，它从html中获取select并将其替换为多列ul - 它是一个列表，但在float:left;上有li子项，因此列数基于计算（如果ul宽度为600且li宽度为200，我显然会有3列）。

这是理论 - 简单的部分。

示例：5个项目，2列

现在，当我从select中获取数据时，我有这个列表：

如果我只是将数组推入ul，它将在屏幕上显示如下：

1   2
3   4
5

但是对于用户/读者来说，当您没有阅读Left->Bottom，而是Bottom->Left时，这会更容易也更好，这意味着您正在阅读直到列的底部，然后转到下一列，而不是阅读行，然后下一行。

所以我需要将列表转换为列：

1   4
2   5
3

所以，实际上ul将是这个顺序：

1   4   2   5   3

这需要使用变量列号，因为如果我们决定将10个项目添加到列表中，那么使用更多列可能看起来更好。

有关所需操作员/周期和数学的任何帮助吗？

谢谢

Answer 1

我认为这是一个有趣的问题，所以我给你写了一个插件。我测试了一下它似乎工作。如果这是你想要的，请告诉我！

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

http://jsbin.com/ocama/3

该算法非常简单，它几乎可以归结为查找有多少行并根据该数字对列进行分组。

Answer 2

如果你知道有多少列，那么你可以一次跳过列表 n 来制作你的<li>元素。因此，对于三列，您选择项目0,3,6，...然后返回并选择1,4,7，然后选择2,5,8。

Answer 3

我做到了：]

我做了所有的计算。我也喜欢 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
        }
    }
}

将jQuery对象列表重新排序到列

3 个答案: