Как родительскому элементу добавить в data-* атрибуты значения дочерних элементов

Question

Есть условно 10 item вот такой структуры

<a href="#" class="movies-list__item">
   <div class="movies-list__poster">
     <img class="movies-list__img" src="../src/img/Russian_doll.jpg"></img>
     <span class="movies-list__company movies-list__company-netflix">Netflix</span>
   </div>
   <div class="movies-list__descr">
     <span class="movies-list__name">Russian Doll</span>
     <span class="movies-list__age">2019, </span>
     <span class="movies-list__type">Tv</span>
   </div>
   <div class="ratings movies-list__ratings">
      <div class="ratings__tomato">
         <div class="ratings__score">97%</div>
       </div>
       <div class="ratings__popcorn">
         <div class="ratings__score">87%</div>
       </div>
  </div>
</a>

Нужно для каждого главного родительского элемента в item, т.е для <a href="#" class="movies-list__item"> добавить data атрибуты со значениями некоторых дочерних элементов. Т.е. для моего примера это будет выглядеть так <a href="#" class="movies-list__item" data-type="Tv" data-age="2019" data-company="Netflix">

У меня есть идея как это сделать. Собрать массивы всех movies-list__age , movies-list__type, movies-list__company и добавить их значения в item. Например так:

const moviesList = document.querySelector('.movies-list');
const arrMoviesItems = [...moviesList.children];
const moviesType =  document.querySelectorAll('.movies-list__item .movies-list__type');
const arrMoviesType = [...moviesType];

    for(i = 0; i<=arrMoviesType.length;i++){
       arrMoviesItems[i].setAttribute('data-type', arrMoviesType[i].innerText.toLowerCase())
}

Но что-то мне подсказывает, что есть более нормальное решение как можно вытянуть значения дочерних тегов в data атрибут родителя <a href="#" class="movies-list__item">

Answer 1

Да, это что-то верно подсказывает.

const arrMoviesItems = [...document.querySelectorAll('.movies-list').children];

for(let i = 0; i <= arrMoviesType.length; i++) { // У вас тут ошибка, забыли let
  let current = arrMoviesItems[i];

  current.dataset.type = // Специальное api для работы с data-*
    current.querySelector('.movies-list__type').textContent; // current.querySelector вернёт элемент таким селектором ВНУТРИ current
  current.dataset.age =
    current.querySelector('.movies-list__age').textContent; // В примере было data-company="Netflix", зачем же тогда .toLowerCase()?
  current.dataset.company =
    current.querySelector('.movies-list__company').textContent;
}

БЛОГ НА HUSL

Как родительскому элементу добавить в data-* атрибуты значения дочерних элементов

Ответы (1 шт):