jasonOk
@jasonOk
Легче болтать, чем код писать

Что за очень странное поведение?

Столкнуля с необъяснимым поведением при проходе циклом по HTML коллекции.

Есть contenteditable, внутри разный текст и несколько картинок emoji img с alt атрибутом в виде самой эмодзи.

При событии keyup мне нужно пройтись циклом по всем тегам img и заменить их на контент из alt атрибута.
Вот тут и возникает проблема — каждый второй img игнорируется и я не понимаю почему.

Чтобы во всём разобраться живой пример.
  • Вопрос задан
  • 186 просмотров
Решения вопроса 2
Поведение как раз не странное. Вот что бывает, когда над итерируемым объектом совершают какие-то преобразования.
div.children - это NodeList, вы его меняете внутри forEach, и сбиваете итератор тем самым.
Чтобы этого не происходило нужно получить объект класса Array и выполнять итерацию уже по нему.
Чтобы это сделать можно использовать либо Array.from, либо Array.prototype.slice.call(div.children)
Ответ написан
Комментировать
FreeMan94
@FreeMan94
Frontend developer
Вот так работает:
Array.from(div.children).forEach(function (elem) {
  if (elem.tagName === 'IMG') {
    div.replaceChild(
      document.createTextNode(elem.getAttribute('alt')), elem);
  }
});

Нужно итерироваться по массиву
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы