Блог

Главная - Вопросы по программированию - Отображение каждого элемента массива в другом div

Отображение каждого элемента массива в другом div

#javascript #arrays

#javascript #массивы

Вопрос:

У меня есть массив, содержащий 4 элемента, и я хочу, чтобы каждый из этих элементов отображался в своем собственном div.

 <div id="chord-box"></div>
<div id="chord-box"></div>
<div id="chord-box"></div>
<div id="chord-box"></div>
  
 const chordsArray = ['C', 'Dm', 'Em', 'F'];
const chordBox = document.getElementById('chord-box');

Как мне заставить каждый элемент массива отображаться в своем собственном div?

Комментарии:

1. Здесь есть несколько проблем, в первую очередь из-за того, что вы используете an id несколько раз; его можно использовать только один раз

2. I want each of these items to display in its own div , какой из них принадлежит какому div?

Ответ №1:

Другой способ — создавать элементы во время выполнения с большим преимуществом: вам не нужно, чтобы divs присутствовали (и в конечном количестве) в ваших строительных лесах, их количество будет зависеть от количества ваших аккордов.

 const chordsArray = ['C', 'Dm', 'Em', 'F'];
const container = document.getElementById('container');

for(let i=0; i < chordsArray.length; i  = 1){
  let chord = document.createElement('div');
  chord.innerHTML = chordsArray[i];
  container.appendChild(chord);
}  
 <div id="container"></div>

Ответ №2:

Быстрый и грязный способ сделать это:

 const chordsArray = ['C', 'Dm', 'Em', 'F'];
const chordBox = document.getElementsByClassName('chord-box');

for(let i = 0; i < chordBox.length; i  ) {
  chordBox[i].innerText = chordsArray[i];
}  
 <div class="chord-box"></div>
<div class="chord-box"></div>
<div class="chord-box"></div>
<div class="chord-box"></div>

Мысли

Обратите внимание, что я изменил id класс to; id атрибут должен существовать только для 1 элемента одновременно. Это identifier , в то время как, class представляет группу или класс элементов.

В этом примере предполагается, что у вас будет равное количество div s, поскольку у вас есть элементы в массиве; это очень наивный способ мышления, вероятно, divs следует вводить по мере необходимости: 

 const chordsArray = ['C', 'Dm', 'Em', 'F'];
const chordsContainer = document.getElementById("chords-container");

for(let i = 0; i < chordsArray.length; i  ) {
  chordsContainer.innerHTML  = '<div>'   chordsArray[i]   '</div>';
}  
 <div id="chords-container"></div>

Надеюсь, это поможет!

Ответ №3:

вы могли бы использовать этот код, который генерирует поля динамически

 var chordsArray = ['C', 'Dm', 'Em', 'F'];
var bodyElement = document.getElementsByTagName("body")[0];


for(var i = 0; i < chordBox.length; i  ) {
    var chordBox = document.createElement("div");
    chordBox.className = "chord-box";
    chordBox.innerHTML = chordsArray[i];
    bodyElement.appendChild(chordBox);
}

В этом случае я добавляю поля в элемент body.

Ответ №4:

Хороший вопрос. Вы могли бы попробовать что-то подобное, прокручивая свой массив аккордов и генерируя из него HTML. 

 const html = ['C', 'Dm', 'Em', 'F'].map(chord => {return `<div id='${chord}'>${chord}</div> `}).join('')
const chordsContainer = document.getElementById("chords-container");
chordsContainer.innerHTML  = html

Чтобы разбить его:

  1. Создайте массив ['C', 'Dm', 'Em', 'F']
  2. Перебирайте каждый аккорд map , называя каждый элемент по мере его выхода chord
  3. Генерируйте html, возвращая каждый раз <div id='${chord}'>${chord}</div>
  4. Объедините массив в строку HTML .join('')
  5. Наконец, добавьте недавно созданный HTML-код в chordsContainer

Подробнее читайте в map -> Javascript Array.map() в Mozilla MDN

Ответ №5:

Я изменил id с помощью class, чтобы поместить каждое значение массива в соответствующий div, вы можете использовать JavaScript для перебора массива и присвоения каждого значения свойству innerText соответствующего div.

 const chordsArray = ['C', 'Dm', 'Em', 'F'];
const chordBoxes = document.querySelectorAll(".chord-box");

// for loop
for (let i = 0; i < chordsArray.length; i  ) {
  chordBoxes[i].innerText = chordsArray[i];
}

// forEach loop
chordsArray.forEach((value, index) => {
  chordBoxes[index].innerText = value;
});  
 <div class="chord-box"></div>
<div class="chord-box"></div>
<div class="chord-box"></div>
<div class="chord-box"></div>