每隔一秒和五分之一增量创建一行

Question

我有一个网格，想在我的 for 循环中每隔一秒和五分之一增量创建一行。它看起来像 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 并将其重置为 1 并且运行同样的逻辑

检查这个片段

var container = document.querySelector('.container');
var frag = document.createDocumentFragment();
var count = 1;
for (var i = 0; i < 18; i++) {

  var span = document.createElement('div');
  span.classList.add('span');

  if (count == 2 || count == 5) {
    var row = document.createElement('div');
    row.classList.add('row');
    frag.appendChild(row);


    if (count == 5) {
      span.classList.add('span8');
      count = 1;
    } else if (count == 2) {
      span.classList.add('span4');
    }
    row.append(span);
  }
  count++;


}

container.append(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 2

试试这个...它会丢失您的 mod 计算。按照您最初描述它的方式，每个偶数实例都会有运行（尽管您的代码有 3 而不是 2）。另外，循环从零计数开始，所以这也是一个问题。

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

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

每隔一秒和五分之一增量创建一行

Creating a row for every second and fifth increment

javascript

for-loop

modulo