How can I add up numbers that appear in class names?

Question

Take the following code:

<div id="work">
    <div class="large-{{columns}} large-offset-{{columns}} columns projects">                       
    </div>
</div>

The idea is that <div class="large-{{columns}} large-offset-{{columns}} columns projects"> can be generated an indefinite amount of times inside #work , and {{columns}} generates a number between 0 and 12.

What I want to do is run some JavaScript that goes through the numbers generated by {{columns}} and every time the sum is about to surpass 12, the associated divs get wrapped inside a new div with class "row".

The resulting HTML might look like this:

<div id="work">
  <div class="row"> 
    <div class="large-8 large-offset-4 columns projects"></div>
  </div> 
  <div class="row"> 
    <div class="large-6 large-offset-0 columns projects></div>
    <div class="large-6 large-offset-0 columns projects"></div>
  </div>
  <div class="row"> 
    <div class="large-4 large-offset-0 columns projects"></div>
    <div class="large-8 large-offset-0 columns projects"></div>
  </div>
  <div class="row"> 
    <div class="large-12 large-offset-0 columns projects"></div>
  </div> 
</div>

How can I accomplish this?

Answer 1

You can extract the {{columns}} values from each div's class name with the following regular expression:

/large-(\d+)\s* large-offset-(\d+)/

This computes the delta that should be added to the running sum:

var matches = /large-(\d+)\s* large-offset-(\d+)/.exec(item.className),
    delta = parseInt(matches[1], 10) + parseInt(matches[2], 10);

You can make new row divs with document.createElement and fill them with clones of the original divs.

Demonstration:

 function makeRowDiv(buildRow) { var row = document.createElement('div'); row.className = 'row'; for (var i = 0; i < buildRow.length; ++i) { row.appendChild(buildRow[i]); } return row; } window.onload = function () { var work = document.getElementById('work'), items = work.getElementsByTagName('div'), newWork = document.createElement('div'); var buildRow = [], count = 0; for (var i = 0; i < items.length; ++i) { var item = items[i]; if (item.className.indexOf('columns') == -1) { continue; } // Extract the desired value. var matches = /large-(\\d+)\\s* large-offset-(\\d+)/.exec(item.className), delta = parseInt(matches[1], 10) + parseInt(matches[2], 10); if (count + delta > 12 && buildRow.length != 0) { newWork.appendChild(makeRowDiv(buildRow)); count = 0; buildRow = []; } buildRow.push(item.cloneNode(true)); count += delta; } if (buildRow.length != 0) { newWork.appendChild(makeRowDiv(buildRow)); } // Replace work with newWork. work.parentNode.insertBefore(newWork, work); work.parentNode.removeChild(work); newWork.id = 'work'; }; 

 body { font-family: sans-serif; font-size: 14px; color: #444; } #work .row { padding: 1px; margin: 8px; background: #deedff; border: 1px solid #c4d1e1; } #work .row div { /* display: inline; */ padding: 1px 4px 2px 4px; margin: 4px; background: #fff3fc; border: 1px solid #ded3dc; } #work .row div div { /* display: inline; */ padding: 1px 4px 2px 4px; margin: 4px; background: #eee; border: 1px solid #ddd; } p { padding: 0; margin: 0; } 

 <div id="work"> <div class="large-8 large-offset-4 columns projects"> <div class="child-div"><p>8</p></div> <div class="child-div"><p>4</p></div> </div> <div class="large-6 large-offset-0 columns projects"> <div class="child-div"><p>6</p></div> </div> <div class="large-3 large-offset-3 columns projects"> <div class="child-div"><p>3</p></div> <div class="child-div"><p>3</p></div> </div> <div class="large-4 large-offset-0 columns projects"> <div class="child-div"><p>4</p></div> </div> <div class="large-8 large-offset-0 columns projects"> <div class="child-div"><p>8</p></div> </div> <div class="large-6 large-offset-6 columns projects"> <div class="child-div"><p>6</p></div> <div class="child-div"><p>6</p></div> </div> </div> 

If you have enough horizontal space, you can uncomment the CSS line /* display: inline; */ /* display: inline; */ to see the children of each row div arranged side by side.

Answer 2

I would use split or replace to get your integers and sum them up as suggested here .

Example:

var str = 'large-8 large-offset-6';

var large = str.replace(/.*large-(\d+)/, '$1');
var offset = str.replace(/.*large-offset-(\d+)/, '$1');

Then use a solution such as this to get your wrappers.

Example:

var divs = $("#work > .columns");
var count = <count how many cols are need to reach sum>
for(var i = 0; i < divs.length; i+=count) {
 divs.slice(i, i+count).wrapAll("<div class='new'></div>");
}

I'm sure you can clean it up and finish it off but should give you the idea. I will complete when I get time tonight.