title: HTML ul > li into 3 columns using the jQuery
body: <p>What I am trying to do is, split a list into 3 columns. I know the css3 have the option to do this but I want it to be done with jQuery. Because the application need to work on IE 8+.</p>
  
  <p>I will explain what I've tried kindly check my code</p>
  
  <pre><code>&lt;ul class="split-list"&gt;
    &lt;li&gt;list Item 1&lt;/li&gt;
    &lt;li&gt;list Item 2&lt;/li&gt;
    &lt;li&gt;list Item 3&lt;/li&gt;
    &lt;li&gt;list Item 4&lt;/li&gt;
    &lt;li&gt;list Item 5&lt;/li&gt;
    &lt;li&gt;list Item 6&lt;/li&gt;
    &lt;li&gt;list Item 7&lt;/li&gt;
    &lt;li&gt;list Item 8&lt;/li&gt;
    &lt;li&gt;list Item 9&lt;/li&gt;
    &lt;li&gt;list Item 10&lt;/li&gt;
    &lt;li&gt;list Item 11&lt;/li&gt;
    &lt;li&gt;list Item 12&lt;/li&gt;
    &lt;li&gt;list Item 13&lt;/li&gt;
    &lt;li&gt;list Item 14&lt;/li&gt;
    &lt;li&gt;list Item 15&lt;/li&gt;
    &lt;li&gt;list Item 16&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Here is my jQuery</p>
  
  <pre><code>$(function($) {
      var num_cols = 3,
      container = $('.split-list'),
      listItem = 'li',
      listClass = 'sub-list';
      container.each(function() {
          var items_per_col = new Array(),
          items = $(this).find(listItem),
          min_items_per_col = Math.floor(items.length / num_cols),
          difference = items.length - (min_items_per_col * num_cols);
          for (var i = 0; i &lt; num_cols; i++) {
              if (i &lt; difference) {
                  items_per_col[i] = min_items_per_col + 1;
              } else {
                  items_per_col[i] = min_items_per_col;
              }
          }
          for (var i = 0; i &lt; num_cols; i++) {
              $(this).append($('&lt;ul &gt;&lt;/ul&gt;').addClass(listClass));
              for (var j = 0; j &lt; items_per_col[i]; j++) {
                  var pointer = 0;
                  for (var k = 0; k &lt; i; k++) {
                      pointer += items_per_col[k];
                  }
                  $(this).find('.' + listClass).last().append(items[j + pointer]);
              }
          }
      });
  });
  </code></pre>
  
  <p>Finally my little css</p>
  
  <pre><code>.split-list ul{
    float: left;
    margin-left: 1em;
  }
  .split-list li{
    padding-right: 2em;
    line-height: 1.5em;
    font-size:12px;
   }
  </code></pre>
  
  <p>See my result:<br>
  <a href="https://i.stack.imgur.com/n6Y7j.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/n6Y7j.jpg" alt="enter image description here"></a></p>
  
  <p>It's spitted into 3 columns but, the problem is I want to pull the <strong>list Item 12</strong> into the second column because that is the normal standard. Always fill the left one and must be dynamic.</p>
  
  <p>Could someone can help me on this ?</p>