Обход DOM дерева и изменение его элементов

243

08 октября 2018, 20:40

Есть массив со значениями, необходимо обойти dom дерево и заполнить содержимое элементов c классом child-elem элементами из массива. Получается что ко всем ссылкам добавляется последний элемент массива. Подскажите что делаю не так.

<div class="container">
<div class="parent-elem">
    <a class="child-elem"></a>
</div>
<div class="parent-elem">
    <a class="child-elem"></a>
</div>
<div class="parent-elem">
    <a class="child-elem"></a>
</div>

let arr = [1,2,3];
let div = '.child-elem',
elems = document.querySelectorAll(div),
elem,
key;
for (key in elems) {
  elem = elems[key];
  for (let i = 0; i<arr.length; i++) {
    elem.innerHTML = arr[i]
   }
}

Answer 1

вообще это решается одним циклом. но есть вопросы по поводу а что делать если элементов дом больше чем элементов в массиве? или наоборот а так это делается примерно так

let arr = [1,2,3]; 
let div = '.child-elem', 
elems = Array.from(document.querySelectorAll(div)), 
elem, 
key; 
 
 
for (let i = 0; i<arr.length; i++) { 
  elems[i].textContent = arr[i] 
}

<div class="container"> 
<div class="parent-elem"> 
    <a class="child-elem"></a> 
</div> 
<div class="parent-elem"> 
    <a class="child-elem"></a> 
</div> 
<div class="parent-elem"> 
    <a class="child-elem"></a> 
</div>

в твоем же случае внутренний цикл последовательно записывает все значения массива в один и тот же элемент и потом переходит на следующий. так и получается что всегда последнее значение во всех элементах.

Answer 2

Получается что ко всем ссылкам добавляется последний элемент массива.

Вы перезаписываете значения.

let arr = [1, 2, 3]; 
let div = '.child-elem', 
  elems = document.querySelectorAll(div), 
  key; 
i = 0 
 
for (key in elems) { 
  // Добавит цифкру в child-elem 
  elems[key].innerHTML = arr[i++] || 'empty' // при разной длине массивов будет печатать empty 
}

<div class="container"> 
  <div class="parent-elem"> 
    <a class="child-elem"></a> 
  </div> 
  <div class="parent-elem"> 
    <a class="child-elem"></a> 
  </div> 
  <div class="parent-elem"> 
    <a class="child-elem"></a> 
  </div> 
 
  <div class="parent-elem"> 
    <a class="child-elem"></a> 
  </div> 
 
  <div class="parent-elem"> 
    <a class="child-elem"></a> 
  </div> 
</div>