Как правильно написать цикл?

Question

[Alex_mersvg]

Допустим что блоков может быть n количство. Мне нужно для каждого блока выполнить следующее:
1)Взять название блока ".words-moving__calm span"
2)В каждый блок running-string-wrapp создать и положить по 10 спанов с названием родителя см.пункт 1 итого 20 спанов
И так для каждого блока g-project__words-moving , а их может быть неведомо сколько. Ниже написанный цикл помещает в каждый блок все названия всех блоков, что не правильно. Как написать правильно цикл?
Есть блок html :

<div class="g-project__words-moving global-flex gl-border-b th-back-color">
                        <div class="words-moving__calm global-flex words-mov-def">
                            <span class="th-color font-default">musicbad</span>
                        </div>
                        <div class="words-moving__running-string global-flex on-hidden words-mov-def op-none">
                            <div class="running-string-wrapp global-flex"></div>
                            <div class="running-string-wrapp global-flex"></div>
                        </div>
                    </div>

и код

function createRunningString() {
    const boxes = document.querySelectorAll('.g-project__words-moving');
    const keySpans = document.querySelectorAll('.words-moving__calm span');
    const place = document.querySelectorAll('.running-string-wrapp');

    let keyWordsArray = [];

    keySpans.forEach(i => keyWordsArray.push(i.innerHTML))

    for(let i = 0; i < boxes.length; i++){ // 5 блоков с видео
        for(let j = 0; j < place.length; j++){ // 2 блока со словами
            for(let k = 0; k < 10; k++){ // Каждому блоку со словами по 10 спанов с именем этого блока
                let span = document.createElement('span');
                span.classList.add('th-color', 'font-default');
                span.innerHTML = `${keyWordsArray[i]}`
                place[j].append(span)
            }
        }
    }


}
createRunningString();

Answer 1

[0xD34F]

Правильно будет циклы в явном виде не писать:

document.querySelectorAll('.g-project__words-moving').forEach(n => {
  const html = n.querySelector('.words-moving__calm span').outerHTML.repeat(10);
  n.querySelectorAll('.running-string-wrapp').forEach(m => m.innerHTML = html);
});

Ну а если говорить об ошибке в вашем коде, то вы всегда перебираете все имеющиеся элементы .words-moving__calm span, вместо того, чтобы ограничиться только теми, которые лежат внутри текущего элемента .g-project__words-moving. Для исправления можно перенести объявление place в начало тела внешнего цикла, заменив при этом document на boxes[i].

Comments

[Alex_mersvg]

благодарю