如何解决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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。