Mam taki oto problem:
Wczytuj na stronie menu w postaci:
<ul>
<li></li>
....
....
....
</ul>
Chciałbym stworzyć menu w formie trzech kolumn obok siebie. Na podstawie tej listy która mam, czyli podzielić ją na 3 i na tej podstawie otrzymać ile elementów mam mieć w kolejnych kolumnach. Mając na myśli "kolumne" mówie o osobnej liście ul, czyli mam 21 elementów dziele je na 3, otrzymuj 7 elementów na "kolumne" (ul). Więc powinien mi stworzyć 3 listy ul.
<ul>
<li>1</li>
<li>....</li>
<li>7</li>
</ul>
<ul>
<li>8</li>
<li>....</li>
<li>15</li>
</ul>
<ul>
<li>16</li>
<li>....</li>
<li>21</li>
</ul>
Kod jaki do tej pory udało mi się stworzyć:
Kod
$('.main-menu ul').each(function () {
$(this).find('ul').each(function(i, list){
var $list = $(list),
items = $list.children('li');
length = Math.ceil(items.length/3);
items.each(function(i){
if ( i % length === 0)
{
var newList = $('<ul></ul>').insertAfter($list).append(items.slice(lenght))
newList.width();
console.log('dzieli');
}
console.log(i);
});
});
});
$(this).find('ul').each(function(i, list){
var $list = $(list),
items = $list.children('li');
length = Math.ceil(items.length/3);
items.each(function(i){
if ( i % length === 0)
{
var newList = $('<ul></ul>').insertAfter($list).append(items.slice(lenght))
newList.width();
console.log('dzieli');
}
console.log(i);
});
});
});
Niestety tworzy mi tylko 2 kolumny, w 1 mam odpowiednia ilość elementów natomiast do drugiej wrzuca mi resztę.
Gdzie popełniam błąd bo nie mogę go znaleźć.