Boone Putney bio photo

Boone Putney

Software Development
Random Musings
Austin, Texas

HumanPlanet Soleer

Email LinkedIn Github

Problem

I’m working on a web application with a highly customizable interface. I have a decent amount of data in lists, and I wanted to be able to quickly divide that data up into an arbitrary number of columns using Bootstrap markup.

jQuery Function Code

 1 //function to divide sibling items into columns
 2 //@para columns, integer value representing number of columns you want
 3 jQuery.fn.toBoostrapColumns = function(columns){
 4     this.parent(".group-column-wrapper").children().unwrap();  //remove existing wrappers if function has previously been called
 5     var groups = this.length;  //total number of groups to be distributed
 6     var columnsLeft = columns;  //columns remaining to be filled
 7     var groupsLeft = groups;  //groups remaining to fill the columns
 8     var start = 0;  //walk start index for column
 9     var addNumber = 0;  //number of items to add into this column
10     while(columnsLeft > 0){ //while we have any columns left to fill
11         //divide remaining groups by remaining columns and weight towards left-most columns
12         addNumber = Math.ceil(groupsLeft/columnsLeft); 
13         //slice the number of elements and wrap in appropriate bootstrap markup
14         this.slice(start,start+addNumber).wrapAll("<div class='col-md-"+String(12/columns)+" group-column-wrapper'></div>");
15         start += addNumber;  //increment the start index for the next column
16         columnsLeft -= 1;  //subtract one from remaining columns
17         groupsLeft -= addNumber;  //decrement count by groups that were placed in this iteration
18     }
19     return this;  //return this for chaining
20 }

Example

Let’s say we have a number of divs that we want to divide into 2 columns using the bootstrap grid:

 1 ...
 2 <div class="item-div">1</div>
 3 <div class="item-div">2</div>
 4 <div class="item-div">3</div>
 5 <div class="item-div">4</div>
 6 <div class="item-div">5</div>
 7 <div class="item-div">6</div>
 8 <div class="item-div">7</div>
 9 <div class="item-div">8</div>
10 <div class="item-div">9</div>
11 ...

All you need to do is use jQuery to select the sibling items, and apply the function:

1 //select .item-div elements and apply boostrap grid markup for 2 columns
2 jQuery(".item-div").toBoostrapColumns(2);

Resulting document markup:

 1 ...
 2 <div class="col-md-6 group-column-wrapper">
 3     <div class="item-div">1</div>
 4     <div class="item-div">2</div>
 5     <div class="item-div">3</div>
 6     <div class="item-div">4</div>
 7     <div class="item-div">5</div>
 8 </div>
 9 <div class="col-md-6 group-column-wrapper">
10     <div class="item-div">6</div>
11     <div class="item-div">7</div>
12     <div class="item-div">8</div>
13     <div class="item-div">9</div>
14 </div>
15 ...

Closing remarks

This code is for a pretty narrow use case. For dividing into columns, it assume all of the sibling elements are about the same height. If there aren’t an even number of elements for each column, the extra elements will be weighted to the left.