0

I am trying to start with an unordered list of dynamically created items that needs to be broken down into unlimited columns of 10 items per column depending of the amount of content. 

<div class="listBox">
<ul class="list">
    <li>Data</li>
    <li>Data</li>
    <li>Data</li>
    <li>Data</li>
    <li>Data</li>
    <li>Data</li>
    <li>Data</li>
    <li>Data</li>
    <li>Data</li>
    <li>Data</li>
    <li>Data</li>
    <li>Data</li>
    <li>Data</li>
    <li>Data</li>
    <li>Data</li>
    <li>Data</li>
    <li>Data</li>
    <li>Data</li>
    <li>Data</li>
    <li>Data</li>
</ul>

I want to use jquery to split it into separate column of 10 for an unlimited amount of columns.

<div class="listBox">
<ul class="list">
    <li>Data</li>
    <li>Data</li>
    <li>Data</li>
    <li>Data</li>
    <li>Data</li>
    <li>Data</li>
    <li>Data</li>
    <li>Data</li>
    <li>Data</li>
    <li>Data</li>
</ul>
<ul class="list">
    <li>Data</li>
    <li>Data</li>
    <li>Data</li>
    <li>Data</li>
    <li>Data</li>
    <li>Data</li>
    <li>Data</li>
    <li>Data</li>
    <li>Data</li>
    <li>Data</li>
</ul>

Reyjay
  • 61
  • 8
  • 1
    This sounds hacky... The best thing would be to output/create it correctly to begin with, if possible. – m59 Nov 13 '13 at 20:29
  • I think it is semantically wrong. If it's a single list, it should be a single list in the DOM. This may effect, e.g. accessibility. But again, missing the bigger picture. – Michael Bar-Sinai Nov 13 '13 at 20:35
  • Their is actually a good reason for this, as I've been searching for something similar and ran across this Stack Overflow question.. I'm using an "accordion" styled UL tag to display data and whenever the "accordion" is closed, it causes huge "white space" gaps with data. The only solution to fix this is to break the data into 2 UL's which keeps both of them looking nice and removes the white space problem PROBLEM: http://jsfiddle.net/Pa7K5/5/ SOLUTION: http://jsfiddle.net/Pa7K5/1/ – Oneezy Mar 28 '14 at 22:05

1 Answers1

1

It doesn't make much sense to me to do this (if the DOM isn't what you want it to be, change the DOM without JS), but maybe I'm missing the bigger picture. To answer your question, you could do something like this:

// Also store list, to be able to efficiently remove it later on
var $items = $('.list > li');
var total = Math.floor($items.length / 10);

for (var i=1, i<=total; i++) {
  $items.eq(i*10).after('</ul><ul class="list">');
}
meavo
  • 1,042
  • 1
  • 7
  • 16