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?

Michael Laszlo · Accepted Answer · 2015-08-19T01:28:48.837

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; */ to see the children of each row div arranged side by side.

This works perfectly on its own but breaks when adding child divs inside the .columns divs. — fred, Aug 18 '15 at 21:55
For example: `

some content

` I'm trying to make this work with the Foundation framework, each .columns will contain content, divs, img tags, text and so on.. — fred, Aug 18 '15 at 22:06
If that's what you were looking for, please accept and upvote my answer. — Michael Laszlo, Aug 19 '15 at 01:25

score 0 · Answer 2 · edited May 23 '17 at 11:44

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.

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

2 Answers2