Question

我有一个包含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中？

Answer 1

一种快速而肮脏的方法：

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更改为class； id属性一次只能出现在1个元素上。它是identifier，而class代表一组元素或元素的 class 。

此示例假定您将拥有与数组中的元素相同数量的div；这是一种非常幼稚的思维方式，可能应在需要时将div放在其中：

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>

希望这会有所帮助！

Answer 2

另一种方法是在运行时创建元素，这具有很大的优势：您不需要在支架中存在div（且数量有限），它们的数量取决于和弦的数量。

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>

Answer 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元素中。

Answer 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

要分解它：

创建一个数组['C', 'Dm', 'Em', 'F']
使用map为每个和弦命名chord，对每个和弦进行迭代
通过每次返回<div id='${chord}'>${chord}</div>来生成html
以HTML .join('')的字符串形式加入数组
最后，将新生成的html添加到chordsContainer

在地图上阅读更多-> Javascript Array.map() on Mozilla MDN

Answer 5

使用构造函数尝试以下代码：

 <div id="chord-box"></div>

 var app = new function() {

   this.chordsArray = ['C', 'Dm', 'Em', 'F'];

   this.chordBox = document.getElementById('chord-box');

   this.add = function() {
     var data = '';
     if(this.chordsArray.length > 0) {
      for (var i = 0; i < chordsArray.length; i++) {
        data += '<div>' + this.chordsArray[i] + '</div>';
      }
     }
     return this.chordBox.innerHTML = data;
   }
 }

 app.add();

在不同的div中显示每个数组项

5 个答案:

想法