javascript - 如何替换数组中的元素?
问题描述
我正在构建一个 Wordpress 站点,我已经在其中创建了它,以便您可以通过 CKEditor 通过为插入的图像分配一个类来插入具有视差的全角图像。我编写的脚本用 div 替换找到的图像,并使用替换图像的源作为 div 的背景。其余的由 CSS 完成。我的问题是,到目前为止,我只能让它与具有该类的第一个图像一起使用。
我知道我的代码在哪里出错了——就是当我用 div 替换图像时。
这是我的代码:
if (document.getElementsByClassName('fullwidth-image').length > 0) {
let pictures = document.getElementsByClassName('fullwidth-image');
Array.prototype.forEach.call(pictures, function(e){
let imgUrl = e.src,
imgWrapper = document.createElement('div');
imgWrapper.classList.add('fullwidth-container');
imgWrapper.style.backgroundImage = 'url(' + imgUrl + ')';
e.replaceWith(imgWrapper);
});
}
如果我注释掉
e.replaceWith(imgWrapper);
然后
console.log(e);
按原样输出页面上的所有图像。但是,当它在代码中时,只会输出第一个带有 class="fullwidth-image" 的图像。我怎样才能写得更好?
解决方案
from 返回的值getElementsByClassName
是一个live HTMLCollection
,这意味着它会在基础文档更改时自动更新。
因此,只要您替换其中的一个元素,您通过这个“类数组”对象的迭代就会受到影响。
您可以简单地从集合中的元素创建一个普通数组并对其进行迭代(迭代时不会弄乱)。
let pictureElements = document.getElementsByClassName('fullwidth-image');
const pictures = [...pictureElements]; // Uses object spread syntax
pictures.forEach(function(e) {
let imgUrl = e.src,
imgWrapper = document.createElement('div');
imgWrapper.classList.add('fullwidth-container');
imgWrapper.style.backgroundImage = 'url(' + imgUrl + ')';
e.replaceWith(imgWrapper);
});
div.fullwidth-container {
width: 100%;
height: 50px;
border: 1px solid black;
}
<img class="fullwidth-image" id="img1" src="" alt="No Image 1"/>
<img class="fullwidth-image" id="img2" src="" alt="No Image 2"/>
<img class="fullwidth-image" id="img3" src="" alt="No Image 3"/>
<img class="fullwidth-image" id="img4" src="" alt="No Image 4"/>
<img class="fullwidth-image" id="img5" src="" alt="No Image 5"/>
请注意,所有被替换的元素都应该是<div>
带有黑色边框的 a。
推荐阅读
- c# - 将对象列表绑定到 WPF listviewitem
- reactjs - TypeError:未定义不是一个对象(评估'state.routes.find')
- android-studio - 无法在我的自动完成文本视图中显示条码扫描文本
- python - 如何正确安装geopandas?
- reactjs - 如何在反应中添加 n 封电子邮件?
- chatbot - MS Teams - Bot 中的深层链接删除了聊天选项卡
- python - Selenium find_elements 在 Python 中一遍又一遍地返回相同的元素
- amazon-web-services - RDS 代理目标组不可用
- docker - 如何基于 maven:3.6.3-openjdk-14 镜像在 docker 容器中安装 aws-cli?
- c# - asp .net core 3.1 JWT和SignalR认证登录部分