回圈陣列并將結果分配給三個不同的段落

我有一個 0-3 個名稱值的陣列。我需要遍歷我的陣列并將值寫入<p>具有不同類名的 3 個不同的值。

不確定如何使用 innerHTML 將資料值分配給各個 div。網上有大量關于如何將所有資料寫入單個 div 而不是多個（我可以找到）的資訊。

這是原理代碼...

const dataResults = ['Apple', 'Orange', 'Pear']

for (var i = 0; i < dataResults.length; i  ) {
  //how to distribute these results to V1, V2 and V3???
  console.log(dataResults[i]);
}

<div class="selections">
  <p class="v1">-</p>
  <p class="v2">-</p>
  <p class="v3">-</p>
</div>

作為結束獎勵，我還需要在完成任務后清空陣列。

uj5u.com熱心網友回復：

const dataResults = ['Apple', 'Orange', 'Pear'];
for (var i = 0; i < dataResults.length; i  ) {
    document.querySelector(".v"   (i   1)).innerHTML = dataResults[i];
}

<div class="selections">
    <p class="v1">-</p>
    <p class="v2">-</p>
    <p class="v3">-</p>
</div>

uj5u.com熱心網友回復：

您應該從回圈索引動態構建選擇器：

const dataResults = ['Apple', 'Orange', 'Pear']

for (var i = 0; i < dataResults.length; i  ) {
       el = document.querySelector('.v'   (i   1));
       text = document.createTextNode(dataResults[i]);
       el.appendChild(text);

       console.log(dataResults[i]);
}

<div class="selections">
  <p class="v1">-</p>
  <p class="v2">-</p>
  <p class="v3">-</p>
</div>

uj5u.com熱心網友回復：

上述問題的一種解決方案是將<p>標簽存盤在串列中并在其中添加元素。喜歡：

const dataResults = ['Apple', 'Orange', 'Pear']


let d = document.getElementsByClassName('selections')[0]
let p = d.children;
let count = d.childElementCount;


for (var i = 0; i < dataResults.length; i  ) {
  p[i%count].innerHTML = dataResults[i]
  console.log(dataResults[i]);
}

<div class="selections">
  <p class="v1">-</p>
  <p class="v2">-</p>
  <p class="v3">-</p>
</div>

uj5u.com熱心網友回復：

選擇段落并回圈設定文本。

const dataResults = ['Apple', 'Orange', 'Pear']

document.querySelectorAll(".selections p").forEach(function(p, index) {
  p.textContent = dataResults[index] || '';
});

<div class="selections">
  <p class="v1">-</p>
  <p class="v2">-</p>
  <p class="v3">-</p>
</div>

uj5u.com熱心網友回復：

您可以使用模運算子使其更具動態性，因此您可以將任意長度的陣列項分配給 3 個元素

const dataResults = ['Apple', 'Orange', 'Pear', 'Foo', 'Baz']

const sets = [
    [],
    [],
    []
];

// 1. sort items into sets by item index
dataResults.forEach((item, i) => {
    sets[i % 3].push(item);
});

// 2 set each p element content
sets.forEach((set, i) => {
    const node = document.querySelector(`.selections .v${i   1}`);

    // make sure node exists, to prevent any HTML errors
    // or you could even create the P tag here to prevent any issues
    // and append that to the .selections
    if (node != null) {
        node.innerHTML = set.join(', ');
    }
});

uj5u.com熱心網友回復：

• querySelectorAll()全選<p>
• item[i]用于插入 HTML 文本<p>

const dataResults = ['Apple', 'Orange', 'Pear'];
const item = document.querySelectorAll(".selections p");  

for (var i = 0; i < dataResults.length; i  ) {
  item[i].innerHTML = dataResults[i];
  console.log(dataResults[i]);
}

<div class="selections">
  <p class="v1">-</p>
  <p class="v2">-</p>
  <p class="v3">-</p>
</div>

uj5u.com熱心網友回復：

根據需要制作 div 元素。這樣，您就不會受限于 DOM 中存在的元素數量。

遍歷陣列并生成一個 HTML 字串陣列。您可以join將它們添加到容器的 innerHTML 中。

const data = ['Parnsip', 'Apple', 'Orange', 'Pear', 'Peach', 'Carrot', 'Billy Joel', 'No, Mr. Bond - I expect you to die.'];

// Cache the container
const selections = document.querySelector('.selections');

// Create an array of HTML strings but make sure
// you `join` them up into one string so you can...
const html = data.map(el => `<div>${el}</div>`).join('');

// Add that HTML string to the container
selections.innerHTML = html;

// Finally empty the array
data.length = 0;

<div class="selections"></div>

附加檔案

• map

• 模板/字串文字

標籤：javascript html

上一篇：如何使最初不會停止的過濾功能為假？

下一篇：正則運算式：選擇直到第一個空格或逗號出現