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>