Суть задачи:
Обрамить пункты меню в 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">');
});
Но далее знаний не хватает, а поиск дал больше вопросов, че ответов =(
Благодарю)