时间戳

首页 > 解决方案 > JQuery Boostrap 每 2 次迭代追加行，但列被忽略

javascript - JQuery Boostrap 每 2 次迭代追加行，但列被忽略

问题描述

我正在使用 JQuery 3 和 Bootstrap 3。我正在尝试动态添加row，col但我不明白我的错误。

我想在我的 dom 中添加每 2 次迭代<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>

我不明白为什么有些 col 被忽略了。这是我的 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/

标签： javascriptjquerytwitter-bootstrap-3

解决方案

请试试这个

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

推荐阅读