Question

我正在使用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/

Answer 1

请尝试

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

Answer 2

您可以尝试以下方法：

for (var i = 1; i < 5; i++) {
  let row = $("<div>", {"class": "row"});
 let col = '<div class="col-xs-6">test</div>';
  if (i % 2) {
    $('.container').append(row);
    row.append(col);
  }


  row.append(col);
}

Answer 3

您必须每2个循环而不是每次都重新初始化该行，以便可以将同一行附加到childs

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container"></div>

jQuery Boostrap每2次迭代追加行但忽略列

3 个答案: