Получить значение data-атрибута и этим значением заменить содержание span-элемента

Рейтинг: 0Ответов: 1Опубликовано: 06.07.2023

Есть несколько span элементов с data-атрибутом data-caption. Моя задача получить значение этого атрибута и заменить им значение самого span.

let dataCaptions = [].map.call(document.querySelectorAll('.caption[data-caption]'), function(el) {return el.dataset.caption;});
let captions = [].map.call(document.querySelectorAll('.caption'), function(el) {return el.textContent;});
captions = dataCaptions;
<div class="captions">
  <span class="caption" data-caption="North">Север</span>
  <span class="caption" data-caption="South">Юг</span>
  <span class="caption" data-caption="East">Восток</span>
  <span class="caption" data-caption="West">Запад</span>
</div>

javascript html массивы map
Источник: Stack Overflow на русском

Ответы

▲ 0Принят

Вы в принципе практически все сделали сами, но достаточно будет один раз получить все элементы с .caption и там же поменять текст контент. Ну и заменил map на forEach так как новый массив Вам вроде как не нужен.

[].forEach.call(document.querySelectorAll('.caption'), (el) => {
  el.textContent = el.dataset.caption;
});
<div class="captions">
  <span class="caption" data-caption="North">Север</span>
  <span class="caption" data-caption="South">Юг</span>
  <span class="caption" data-caption="East">Восток</span>
  <span class="caption" data-caption="West">Запад</span>
</div>