Javascript循环：插入元素仅在上一次迭代中起作用

问题描述

我正在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]，每次迭代都能正确打印

解决方法

您只有一个parent元素，可访问页面上的条目标题。

您应该尝试将所有内容放入循环中。因为我假设每个条目的摘录都不同，所以您应该创建一种方法来动态生成它们或从某个地方获取它们。

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;
}

请将父级放入循环中。查看以下示例

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>

javascript nodes wordpress