JQuery Boostrap добавлять строки каждые 2 итерации, но столбцы игнорируются

Question

Я использую JQuery 3 и Bootstrap 3. Я пытаюсь динамически добавлять row и col, но я не понимаю свою ошибку.

Каждые 2 итерации I Я хочу добавить <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

Вы должны реинициализировать строку каждые 2 цикла не каждый раз, чтобы вы могли добавить в одну и ту же строку дочерние элементы

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>

Answer 3

Вы можете попробовать это:

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