Как заменить элементы в массиве? - PullRequest
Новая
       22

Как заменить элементы в массиве?

2 голосов
/ 01 апреля 2019

Я создаю сайт 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);

1011 * тогда * 

console.log(e);

выводит все изображения на странице, как и должно быть. Когда он находится в коде, выводится только первое изображение с class = "fullwidth-image". Как я могу написать это лучше?

Ответы [ 2 ]

0 голосов
/ 01 апреля 2019

Попробуйте querySelectorAll вместо getElementsByClassName, у меня это сработало

0 голосов
/ 01 апреля 2019

Возвращаемое значение из 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> с черной рамкой.

...