Переупорядочение списка объектов jQuery в столбцы - PullRequest
Новая
       6

Переупорядочение списка объектов jQuery в столбцы

1 голос
/ 18 февраля 2010

Я работаю над функцией, которая берет select из html и заменяет его многостолбцовым ul - это один список, но имеет float:left; на li дочерних элементах, поэтому число столбцов равно на основе расчетов (если ul ширина равна 600, а li ширина равна 200, у меня, очевидно, будет 3 столбца).

Это теория - легкая часть.

Пример : 5 позиций, 2 столбца

Теперь, когда я беру данные из выбора, у меня есть этот список: 

 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 элементов в список, это может выглядеть лучше с большим количеством столбцов.

Любая помощь с необходимыми операторами / циклами и математикой?

Спасибо

Ответы [ 3 ]

2 голосов
/ 18 февраля 2010

Я подумал, что это интересная проблема, поэтому я написал вам плагин для этого.Я проверил это немного, и это похоже на работу.Дайте мне знать, если это то, что вы хотите!

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

http://jsbin.com/ocama/3

Алгоритм довольно прост, он сводится к тому, чтобы выяснить, сколькоесть строки и группируются столбцы на основе этого числа.

0 голосов
/ 18 февраля 2010

Я сделал это:]

Я сделал все вычисления.Мне также нравится решение Алекса , поэтому я дам ему хороший ответ и добавлю свое решение здесь только для тех, кто ищет подобные проблемы:) 

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
        }
    }
}
0 голосов
/ 18 февраля 2010

Если вы знаете, сколько существует столбцов, тогда вы создадите элементы <li>, пропуская список n за раз. Таким образом, для трех столбцов вы выбираете пункты 0, 3, 6, ..., а затем возвращаетесь и выбираете 1, 4, 7, а затем 2, 5, 8.

...