Создание нового родительского div и 4 дочерних div после каждых 4 отсчетов в javascript - PullRequest
Новая
       16

Создание нового родительского div и 4 дочерних div после каждых 4 отсчетов в javascript

0 голосов
/ 31 октября 2019

Я использую bulma и javascript для создания нового div (div с столбцами имен классов) и добавляю 4 div с именами классов «column» после каждых 4 подсчетов. у меня проблемы с размещением 4 делителей под одним делом 

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>

Ответы [ 2 ]

2 голосов
/ 31 октября 2019

Все, что мне нужно, это немного переместить одну строку кода вниз. 

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>
0 голосов
/ 31 октября 2019

Вы можете создать строку условно так, чтобы начало и конец элемента .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>
...