时间戳

首页 > 解决方案 > 在javascript中每4个计数后创建新的父div和4个子div

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

问题描述

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

标签： javascriptjqueryhtmlcssbulma

解决方案

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

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>

推荐阅读