Creating new parent div and 4 child divs after every 4 count in javascript

Question

I m using bulma and javascript to create a new div (div with class name columns) and add 4 divs with class names "column" after every 4 counts. i m having problem putting 4 divs under one 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>

what is the purpose of the extra div? Do you need it only for styling purpose? What kind of layout do you need to achieve? — Fabrizio Calderan, Oct 31 '19 at 10:57

score 1 · Answer 1 · answered Oct 31 '19 at 11:02

All i think you need is to move one line of code down a bit.

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

Also notice that I've added :last to $('#map-card .columns:last') so we always append the content to newly created .columns

Demo

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 no problem, happy to help – Carsten Løvbo Andersen Oct 31 '19 at 11:14 — Carsten Løvbo Andersen, Oct 31 '19 at 11:14

score 0 · Answer 2 · answered Oct 31 '19 at 11:05

You could create a string conditionally such that the beginning and the end of .columns element can be changes using ternary operator as follows (I have generalized the solution for any 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>

Creating new parent div and 4 child divs after every 4 count in javascript

2 Answers2