gpt4 book ai didi

javascript - 如何替换数组中的元素?

转载 作者:行者123 更新时间:2023-11-30 06:17:09 25 4
gpt4 key购买 nike

我正在构建一个 Wordpress 站点,我在其中创建了它,以便您可以通过为插入的图像分配一个类来通过 CKEditor 插入具有视差的全 Angular 图像。我编写的脚本用 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"的图像。我怎样才能写得更好?

最佳答案

getElementsByClassName 的返回值是现场 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>带有黑色边框。

关于javascript - 如何替换数组中的元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55460078/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com