CODEWITHSUNDEEP
jqueryhtml-lists
Reyjay
Reyjay

Reputation: 61

How to split a unlimited & dynamically created list into column using css/jquery

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>

Upvotes: 0

Views: 1638

Answers (1)

meavo
meavo

Reputation: 1042

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">');
}

Upvotes: 1

Related Questions