javascript - jQuery Bootstrap每2次迭代追加行但忽略列

我正在使用JQuery 3和Bootstrap3。我试图动态添加row和col，但是我不理解我的错误。

我想每2次迭代在自己的dom中添加<div class="row"></div>，并在此行中添加2列。

我想要这个HTML：

<div class="row">
  <div class="col-xs-6">test</div>
  <div class="col-xs-6">test</div>
</div>
<div class="row">
  <div class="col-xs-6">test</div>
  <div class="col-xs-6">test</div>
</div>
<div class="row">
  <div class="col-xs-6">test</div>
</div>

但是我得到的当前结果是：

  <div class="row">
    <div class="col-xs-6">test</div>
  </div>
  <div class="row">
    <div class="col-xs-6">test</div>
  </div>

我不明白为什么有些上校会被忽略。这是我的JavaScript代码：

for (var i = 1; i < 5; i++) {
  let row = $("<div>", {"class": "row"});

  if (i % 2) {
    $('.container').append(row);
  }

  let col = '<div class="col-xs-6">test</div>';
  row.append(col);
}

和我的jsfiddle：https://jsfiddle.net/gkn4vmx8/

最佳答案

请尝试这个

let row=null;
for (var i = 1; i < 5; i++) {

  if (i % 2) {
    row= $("<div>", {"class": "row"});
    $('.container').append(row);
  }

  let col = '<div class="col-xs-6">test</div>';
  row.append(col);
}

关于javascript - jQuery Bootstrap每2次迭代追加行但忽略列，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/59715855/