javascript - 如何将类名称中出现的数字相加？

Question

采用以下代码:

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

这个想法是 <div class="large-{{columns}} large-offset-{{columns}} columns projects">可以在 #work 内无限次生成，和{{columns}}生成 0 到 12 之间的数字。

我想要做的是运行一些 JavaScript 来遍历 {{columns}} 生成的数字。每当总和即将超过 12 时，关联的 div 就会被包装在类为“row”的新 div 中。

生成的 HTML 可能如下所示:

<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>

我怎样才能做到这一点？

Answer 1

您可以使用以下正则表达式从每个 div 的类名中提取 {{columns}} 值:

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

这将计算应添加到运行总和中的增量:

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

您可以使用 document.createElement 创建新的行 div，并用原始 div 的克隆填充它们。

演示:

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>

如果你有足够的水平空间，你可以取消CSS行的注释 /* display: inline; */ 查看并排排列的每行 div 的子项。