Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<meta charset=utf-8 />
<title>jq columns</title>
</head>
<body>
<ul id="coolguylist">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>
</body>
</html>
 
/**
 * rowsToColumns jQuery Plugin
 * by Alex Sexton
 * AlexSexton@gmail.com
 * 
 * @license WTFPL - http://sam.zoy.org/wtfpl/
 */
(function($){
  $.fn.rowsToColumns = function(columns){
    if (this.length) {
      return this.each(function(){
        var $this    = $(this),
            lis      = $this.find('li'),
            count    = lis.length,
            interval = Math.ceil(count/columns),
            newOrder = [];
        
        // Find our new order
        for(var i = 0; i < interval; i++) {
          var liIndex = i,
              row     = [];
          
          while (liIndex < count) {
            row.push(lis.eq(liIndex));
            liIndex += interval;
          }
          
          newOrder.push(row);
        }
        
        // Create an empty replacement UL
        var $newUL = $this.clone(true).empty();
        
        // Clone the li's into the new list
        for(var j in newOrder) {
          if (newOrder.hasOwnProperty(j)){
            for (var k in newOrder[j]) {
              if (newOrder[j].hasOwnProperty(k)) {
                $newUL.append(newOrder[j][k].clone(true));
              }
            }
          }
        }
        
        // Replace the original ul with the new one
        $this.replaceWith($newUL);
      });
    }
  };
})(jQuery);
​
​
// run the plugin on document ready
$(function(){
  $('#coolguylist').rowsToColumns(2);
});
​
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers