遍歷數組並追加到不同的HTML元素

Question

我有3個HTML列和一個包含3個對象的數組。 我試圖遍歷數組並將數組內的值附加到每個HTML列。 因此，數組中的第一個對象到第一列，第二個對象到第二列。 哪種循環最適合這種情況？

 var shortenedCast = fullCast.slice(0, 3); var arrayLength = shortenedCast.length; //3 var columns = document.getElementsByClassName("panel-item"); var characterP = document.getElementsByClassName("character"); for (var i = 0; i < arrayLength; i++) { console.log(shortenedCast[i].character); //John wick //Viggo Tarasov //Iosef Tarasov characterP.textContent = shortenedCast[i].character; } console.log(shortenedCast); 

 <div class="column small-4"> <div class="panel-item"> <p class="character"></p> </div> </div> <div class="column small-4"> <div class="panel-item"> <p class="character"></p> </div> </div> <div class="column small-4"> <div class="panel-item"> <p class="character"></p> </div> </div> 

Answer 1

我在想也許是一種更動態的方法，而不必在每次增加數組時都添加新的Div。

arr = ['John wick', 'Viggo Tarasov', 'Iosef Tarasov'];

function createColumns(arr) {
  let colItems = [];

  arr.map(item => {
    colItems.push(`
      <div class="column small-4">
        <div class="panel-item">
          <p class="character">${item}</p>
        </div>
      </div>
      `);
  });

  return colItems;
}

document.getElementById('someDivID').innerHTML = createColumns(arr).join('');

Answer 2

感謝異端猴子的工作

對於查看該解決方案的人來說，是在characterP前面添加[i]

var fullCast = credits.cast;


var shortenedCast = fullCast.slice(0,3);
var arrayLength = shortenedCast.length;
var columns = document.getElementsByClassName("panel-item");
var characterP = document.getElementsByClassName("character");

    for (var i = 0; i < arrayLength; i++) {
        console.log(shortenedCast[i].character);  
        characterP[i].textContent = shortenedCast[i].character;
    }