Javascript 循環：插入元素僅在最后一次迭代中起作用

Question

我在 Wordpress 工作，並試圖為網格中的每個投資組合卡添加摘錄（我無法通過主題來做到這一點。

這是我正在使用的自定義腳本。 一切都按預期工作，除了列表中的最后一個節點獲得摘錄。 我改變了迭代次數來測試它，它總是只在它迭代的最后一個節點上插入摘錄。

基於此，似乎每次新的迭代都會撤消或刪除前一次所做的。

window.onload = function() {
    const targets = document.querySelectorAll('.entry-header');
    const parent = document.createElement('div');
    const child = document.createElement('p');
    const excerpt = 'This will be the excerpt...';
    
    parent.className = "entry-excerpt";
    parent.appendChild(child);
    child.innerHTML = excerpt;
    
    for (let i = 0; i < targets.length; i++) {
      targets[i].after(parent);
    }
    
  };

我記錄了目標 [i] 並且每次迭代都正確打印

Answer 1

您只有一個parent元素，它訪問頁面上的entry-header 。

您應該嘗試將所有內容都放在循環中。 因為我假設每個條目的摘錄都會不同，所以您應該創建一個方法來動態生成它們或從某個地方獲取它們。

 const targets = document.querySelectorAll('.entry-header'); window.onload = function() { for (let i = 0; i < targets.length; i++) { parent = getExcerpt(i); targets[i].after(parent); } }; function getExcerpt(index) { const parent = document.createElement('div'); const child = document.createElement('p'); const excerpt = 'This will be the excerpt...'; parent.className = "entry-excerpt"; parent.appendChild(child); child.innerHTML = excerpt; return parent; }

Answer 2

請把父級放在循環內。 查看以下示例

 const targets = document.querySelectorAll('.entry-header'); for (let i = 0; i < targets.length; i++) { const parent = document.createElement('div'); const child = document.createElement('p'); const excerpt = 'This will be the excerpt...'; parent.className = "entry-excerpt"; parent.appendChild(child); child.innerHTML = excerpt; targets[i].after(parent); }

 <div class="entry-header">Entry Header 1</div> <div class="entry-header">Entry Header 2</div> <div class="entry-header">Entry Header 3</div>