问题描述
我的目的是为网格中的每个投资组合卡添加一个摘录(目前,这些摘录仅显示图像,标题和类别)。
我找到了一种将摘录插入卡中并迭代所有卡的方法,但是即使循环按预期方式工作(摘录每个迭代),摘录也不会插入所有卡中。如果我指定targetsArray的特定索引,则摘录仅插入一张卡中。我将这一行注释掉以供参考。
window.onload = function() {
let targets = document.querySelectorAll('.entry-title');
let newElem = document.createElement('p');
let excerpt = 'This will be the excerpt...';
newElem.innerHTML = excerpt;
let targetsArray = [];
for (let i = 0; i < targets.length; i++) {
targetsArray.push(targets[i]);
}
targetsArray.forEach(target => {
console.log(target);
target.parentNode.insertBefore(newElem,target.nextSibling);
});
// targetsArray[1].parentNode.insertBefore(newElem,targetsArray[1].nextSibling);
};
注意:如果您想知道为什么我没有使用简单的方法将节点列表转换为数组,那是因为它们没有用。
我尝试过
const targets = [...document.querySelectorAll(".entry-title")];
和...
Array.from(targets)
作为参考,这是我尝试对这些页面进行更改的页面 equipourkids.org
解决方法
我不知道您是否出于特定原因尝试使用纯JS进行操作,但是默认情况下,WordPress已加载jQuery(如果您未将其删除),那么使用jQuery进行操作应该比这简单得多
let targets = $('.entry-title');
let newElem = $('<p>This will be the excerpt...</p>')
targets.each(function (idx,item){
$(item).parent().insertBefore(newElem);
});
我只是不明白您想根据您的HTML结构在何处插入这些摘录。应该在entry-info里面还是什么?