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}}，而{{columns}}会生成0到12之间的数字。

我想要做的是运行一些JavaScript，它通过<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>生成的数字，每次总和即将超过12时，相关的div被包含在一个新的div中，类为＃34;行＆＃34;

生成的HTML可能如下所示：

var currentItem = 0;

function rotate() {

    container.stop()
        .animate({
        'left': item_width * -1 * currentItem
    }, 1500);

    currentItem++;
    if (currentItem >= 5) {
       currentItem = 0;
    }
}

我该如何做到这一点？

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的子项并排排列。

Answer 2

我会使用split或replace来获取整数并按照建议here进行总结。

示例：

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

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

然后使用this等解决方案来获取包装器。

示例：

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>");
}

我确定你可以清理它并完成它但是应该给你一个想法。我今晚有空的时候会完成。

如何添加出现在类名中的数字？

2 个答案: