Вечер добрый, господа. Можете помочь разобраться с задачкой. Нужно в уже имеющуюся форму, в каждый .parent добавить новый элемент .child со значением взятым из массива. ID у элементов нет. Пытался делать через append( ), но возникли проблемы с добавлением значения. Если добавлять через цикл, то само собой в каждый .parent добавляется столько .child, сколько значений в массиве. Как можно сделать иначе?
html
<div class="box">
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
</div>
<hr>
<div class="parent">
<div class="child">10</div>
<div class="child">20</div>
<div class="child">30</div>
</div>
<hr>
<div class="parent">
<div class="child">5</div>
<div class="child">10</div>
<div class="child">15</div>
</div>
</div>
js
<script>
let arr = [4, 40, 20];
for(let i = 0; i < arr.length; i++) {
$('.parent').append(
'<div class="child">' + arr[i] + '</div>'
);
}
</script>
Итог должен получится такой:
result
<div class="box">
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
</div>
<hr>
<div class="parent">
<div class="child">10</div>
<div class="child">20</div>
<div class="child">30</div>
<div class="child">40</div>
</div>
<hr>
<div class="parent">
<div class="child">5</div>
<div class="child">10</div>
<div class="child">15</div>
<div class="child">20</div>
</div>
</div>
Заранее спасибо.