Как обрамить несколько элементов в ul

[Alexxx]

Суть задачи:
Обрамить пункты меню в UL для того, что бы меню росло не в высоту, а в ширину т.е. образовывались столбцы.

Исходный HTML

<ul class="menu">
<li><a href="#">Angelo Cappellini</a></li>
<li><a href="#">Antico Borgo</a></li>
<li><a href="#">Arca</a></li>
<li><a href="#">Asnaghi Interiors</a></li>
<li><a href="#">Bastex</a></li>
<li><a href="#">BM Style</a></li>
<li><a href="#">Caroti</a></li>
</ul>

И в итоге с помощью Jquery я хочу получить такое преобразование:

<ul class="menu">
<li><a href="#">Angelo Cappellini</a></li>
<li><a href="#">Antico Borgo</a></li>
<li><a href="#">Arca</a></li>
<li><a href="#">Asnaghi Interiors</a></li>
</ul>
<ul class="menu">
<li><a href="#">Bastex</a></li>
<li><a href="#">BM Style</a></li>
<li><a href="#">Caroti</a></li>
</ul>

Получилось, что меню разбивается на каждой четвертой по счету ссылке (li), таким образом при добавлении новых ссылок в меню - оно будет образовывать новые колонки и они будут выстраиваться по горизонтали (CSS).

Пытался делать так:

$(function() {
    $('ul.menu li:eq(4)').after('</ul>' + '<ul class="menu">'); 
});

Но далее знаний не хватает, а поиск дал больше вопросов, че ответов =(


Благодарю)

[micscr]

пробегаешь по li и формируешь в переменной новый список из ul. А потом существующий заменишь на получившийся.

[exec]

$('ul.menu li').each(function (i) {
	if (i % 4 == 3) {
		$(this).after('</ul><ul class="menu">');
	}
});

[sysya]

$('ul.menu li').each(function (i) {
	if ((i % 4 == 3) {
		$(this).after('</ul><ul class="menu">');
	}
});

Скобочка в условии, ошибка.
А в условии сказано, что после 12 элемента добавить </ul><ul class="menu"> ? Или мне мануальчик перечитать надо?

[Alexxx]

$('ul.menu li').each(function (i) {
	if ((i % 4 == 3) {
		$(this).after('</ul><ul class="menu">');
	}
});

Наверное, корректнее так:

$(function() {
$('ul.menu li').each(function (i) {
	if (i % 4 == 3) {
		$(this).after('</ul><ul class="menu">');
	}
});
});

Спасибо!

[Alexxx]

На выходе получаю некорректный HTML

<ul class="menu">
<li><a href="#">Angelo Cappellini</a></li>
<ul class="menu"></ul>
<li><a href="#">Antico Borgo</a></li>
<li><a href="#">Arca</a></li>
<li><a href="#">Asnaghi Interiors</a></li>
<li><a href="#">Bastex</a></li>
<ul class="menu"></ul>
<li><a href="#">BM Style</a></li>
<li><a href="#">Caroti</a></li>
<li><a href="#">Caspani Tino</a></li>
</ul>

Вероятно, что Jquery переставляет местами </ul> и <ul class="menu"> дабы исправить "ошибку".

[micscr]

Работает что ли так? А если у родителя hlml() посмотреть?

[micscr]

На выходе получаю некорректный HTML

делай как я тебе говорил (я у себя проверял в работе).

[Alexxx]

делай как я тебе говорил (я у себя проверял в работе).

Я в Jquery небельмес =) Только только начал изучать... Логику понял, но код реализовать с ходу точно пока не смогу, поэтому и прошу помощи тут.

[micscr]

За готовым кодом - в раздел работа, там за пару баксов сделают.

А тут попрошу потрудиться самому иначе не будет толка.
Алгоритм уточню:
1) создаем контейнер накопления
2) пробегаем по li существующего при этом каждые 4-е запихиваем в отдельный ul
3) эти отдельные ul добавляем в контейнер
4) вместо исходного списка вставляем контейнер

Используются только широко распространенные методы jQuery. Жду попыток.