为每第二个和第五个增量创建一行

Question

我有一个网格，想在for-loop中为每第二和第五个增量创建一行。它看起来像2,3,2,3 ...如果我有，说18个增量我怎么能实现这个？我尝试在循环中使用i % 3 === 0 || i % 5 === 0但获得变量结果。数学不是我的强项，所以非常感谢帮助

var container = document.querySelector('.container');
var frag = document.createDocumentFragment();

for (var i = 0; i < 18; i++) {
  var span = document.createElement('div');
  span.classList.add('span');

  if (i % 3 === 0 || i % 5 === 0) {
    var row = document.createElement('div');
    row.classList.add('row');
    frag.appendChild(row)
  }

  if (i % 5 === 0) {
    span.classList.add('span8')
  } else {
    span.classList.add('span4');
  }

  row.appendChild(span);
}

container.appendChild(frag)

.row {
  display: flex;
  border: 1px solid black;
  padding: 10px;
}

.row:not(last-of-type) {
  margin-bottom: 20px;
}

.span {
  border: 1px solid black;
  margin: 0 4px;
  height: 100px;
}

.span8 {
  flex: 1;
}

.span4 {
  flex: .5;
}

<div class="container"></div>

Answer 1

你可以考虑创建一个计数器变量，它以1开始并在每次迭代时递增，如果它2或5运行你的逻辑，一旦计数器重置为1并运行相同的逻辑

检查此代码段

＆＃13;

＆＃13;

.row {
  display: flex;
  border: 1px solid black;
  padding: 10px;
}
.row:not(last-of-type) {
  margin-bottom: 20px;
}
.span {
  border: 1px solid black;
  margin: 0 4px;
  height: 100px;
}
.span8 {
  flex: 1;
}
.span4 {
  flex: .5;
}

＆＃13;

<div class="container"></div>

＆＃13;

jQuery( document ).ready(function($) {
  var winWidth = $(window).width();

  $('.expand').css({
    'width': winWidth,
  });

  $(window).resize(function(){
    $('expand').css({
      'width': winWidth,
    });
  });
});

＆＃13;

＆＃13;

＆＃13;

希望有所帮助

Answer 2

试试这个......它会失去你的mod计算。你最初描述它的方式，它将在每个偶数实例上运行（尽管你的代码有3而不是2）。此外，循环开始于零计数，因此这也是一个问题。

＆＃13;

＆＃13;

var container = document.querySelector('.container');
var frag = document.createDocumentFragment();
var colset = 2;
var colcounter = 0;
var row = document.createElement('div');
row.classList.add('row');

for (var i = 0; i < 18; i++) {
  colcounter++;
  var span = document.createElement('div');
  span.classList.add('span');
  if (i % 5 === 0) {
     span.classList.add('span8');
  } else {
     span.classList.add('span4');
  }
  span.insertAdjacentHTML('beforeend', i);
  row.appendChild(span);
  if ( colcounter === colset ) {
    frag.appendChild(row);
    colcounter = 0;
    colset = ( (colset === 3) ? 2 : 3 );
    var row = document.createElement('div');
    row.classList.add('row');
  }
}
if ( colcounter > 0 ) {
  frag.appendChild(row);
}
container.appendChild(frag);

＆＃13;

.row {
  display: flex;
  border: 1px solid black;
  padding: 10px;
}

.row:not(last-of-type) {
  margin-bottom: 20px;
}

.span {
  border: 1px solid black;
  margin: 0 4px;
  height: 100px;
}

.span8 {
  flex: 1;
}

.span4 {
  flex: .5;
}

＆＃13;

<div class="container"></div>

＆＃13;

＆＃13;

＆＃13;