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 ...
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.
Tags:
jquery
bootstrap
Boone Putney
Software Development Random Musings Austin, Texas
HumanPlanet
Soleer
Email
LinkedIn
Github
jQuery Function: Siblings to Bootstrap Grid was published on January 05, 2015 .