1

私は関数に取り組んでいます。これはselecthtmlから取得し、複数列に置き換えます。これulは1つのリストですがfloat:left;、li子が含まれているため、列の数は計算に基づいています（ul幅が600、li幅が200の場合、明らかに3列あります）。

それが理論です-簡単な部分です。

例：5アイテム、2列

さて、selectからデータを取得すると、次のリストが表示されます。

 1
 2
 3
 4
 5

配列をにプッシュするだけulで、画面上では次のようになります。

1   2
3   4
5

Left->Bottomしかし、ユーザー/リーダーにとっては、読んでいない方が簡単で優れていBottom->Leftます。つまり、行を読んでから次の行を読むのではなく、列の最後まで読んでから次の列に移動するということです。

したがって、リストを列に変換する必要があります。

1   4
2   5
3

したがって、実際には次のul順序になります。

1   4   2   5   3

また、これは可変列番号で機能する必要があります。これは、リストに10個のアイテムを追加することにした場合、列が多いほど見栄えが良くなる可能性があるためです。

必要な演算子/サイクルと関連する数学について何か助けはありますか？

ありがとうございました

4

3 に答える 3

2

これは面白い問題だと思ったので、このプラグインを作成しました。私はそれを少しテストしました、そしてそれはうまくいくようです。これがあなたが望むものであるかどうか私に知らせてください！

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

http://jsbin.com/ocama/3

アルゴリズムは非常に単純です。行の数を見つけ、その数に基づいて列をグループ化するだけです。

于 2010-02-18T17:51:42.153 に答える
0

列の数がわかっている場合は、リストn<li>を一度にスキップして要素を作成します。したがって、3つの列の場合、アイテム0、3、6、...を選択してから、戻って1、4、7、2、5、8を選択します。

于 2010-02-18T17:37:58.257 に答える
0

やった ：]

私はすべての計算を行いました。私もアレックスの解決策が好きなので、彼に良い答えを与え、この種の問題を探している人のためにここに私の解決策を追加します:)

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-18T18:26:03.690 に答える