如何替换数组中的元素？

Question

我正在构建一个 Wordpress 站点，我在其中创建了它，以便您可以通过 CKEditor 通过为插入的图像分配 class 来插入具有视差的全角图像。我编写的脚本用 div 替换找到的图像，并使用替换图像的来源作为 div 的背景。剩下的由 CSS 完成。我的问题是，到目前为止，我只能让它与具有 class.

的第一张图片一起使用

我知道我的代码在哪里崩溃了——当我用 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" 的第一张图像。我怎样才能写得更好？

Answer 1

从getElementsByClassName返回的值是liveHTMLCollection，这意味着它会在基础文档更改时自动更新。

因此，只要您替换其中的一个元素，您对该 "array-like" 对象的迭代就会受到影响。

您可以简单地从集合中的元素创建一个普通数组并对其进行迭代（迭代时不会弄乱）。

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> 带有黑色边框。

Answer 2

尝试使用 querySelectorAll 而不是 getElementsByClassName，它对我有用

如何替换数组中的元素？

How do I replace elements in an array?

javascript

arrays

replacewith