在javascript中每4个计数后创建新的父div和4个子div答案

【问题标题】：Creating new parent div and 4 child divs after every 4 count in javascript在javascript中每4个计数后创建新的父div和4个子div
【发布时间】：2019-10-31 10:56:27
【问题描述】：

我正在使用 bulma 和 javascript 创建一个新的 div（具有类名列的 div），并在每 4 个计数后添加 4 个具有类名“列”的 div。我在将 4 个 div 放在一个 div 下时遇到问题

let locations = [{name: 'location1',value: 11},{name: 'location2',value: 21},
                 {name: 'location3',value: 31},{name: 'location4',value: 41},
                 {name: 'location5', value: 51},{name: 'location6',value: 61},
                 {name: 'location7',value: 71},{name: 'location8',value: 71},
                 {name: 'location9',value: 71},

];

for (let i = 0; i < locations.length; i++) {
  if (i == 0 || i % 3 == 0) {
    $('#map-card').append(`<div class="columns"></div>`);
    $('#map-card .columns').append(`<div class="column">${i}th Column created</div>`)


  }
}

<link href="https://cdn.jsdelivr.net/npm/bulma@0.8.0/css/bulma.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="map-card"></div>

【问题讨论】：

额外 div 的用途是什么？您是否仅出于造型目的需要它？你需要实现什么样的布局？
我已经得到答案了

标签： javascript jquery html css bulma

【解决方案1】：

我认为你需要的只是将一行代码向下移动一点。

for (let i = 0; i < locations.length; i++) {
  if (i == 0 || i % 3 == 0) {
    $('#map-card').append(`<div class="columns"></div>`);
  }
  $('#map-card .columns:last').append(`<div class="column">${i}th Column created</div>`)
}

另请注意，我已将 :last 添加到 $('#map-card .columns:last')，因此我们始终将内容附加到新创建的 .columns

演示

let locations = [{
    name: 'location1',
    value: 11
  }, {
    name: 'location2',
    value: 21
  },
  {
    name: 'location3',
    value: 31
  }, {
    name: 'location4',
    value: 41
  },
  {
    name: 'location5',
    value: 51
  }, {
    name: 'location6',
    value: 61
  },
  {
    name: 'location7',
    value: 71
  }, {
    name: 'location8',
    value: 71
  },
  {
    name: 'location9',
    value: 71
  },

];

for (let i = 0; i < locations.length; i++) {
  if (i == 0 || i % 3 == 0) {
    $('#map-card').append(`<div class="columns"></div>`);
  }
  $('#map-card .columns:last').append(`<div class="column">${i}th Column created</div>`)
}

<link href="https://cdn.jsdelivr.net/npm/bulma@0.8.0/css/bulma.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="map-card"></div>

【讨论】：

@Adestark 没问题，很乐意提供帮助

【解决方案2】：

您可以有条件地创建一个字符串，这样.columns 元素的开头和结尾可以使用三元运算符进行如下更改（我已经为任何n 推广了解决方案）：

let locations = [{ name: 'location1', value: 11 }, { name: 'location2', value: 21 }, { name: 'location3', value: 31 }, { name: 'location4', value: 41 }, { name: 'location5', value: 51 }, { name: 'location6', value: 61 }, { name: 'location7', value: 71 }, { name: 'location8', value: 71 }, { name: 'location9', value: 71 }];

let str = "",
  n = 3;

for (let i = 0; i < locations.length; i++) {
  str += (i % n == 0 ? `<div class="columns">` : '') +
    `<div class="column">Column ${i} created</div>` +
    (i % n == n - 1 ? `</div>` : '');
}

$('#map-card').html(str);

<link href="https://cdn.jsdelivr.net/npm/bulma@0.8.0/css/bulma.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="map-card"></div>

【讨论】：