Почему не работает for внутри append?

<div class="first"></div>
<div class="second"></div>

<!-- С append внутри цикла работает -->
        for (let i = 1; i <= 6; i++) {
            $('.first').append(
                '<p>'+i+'</p>'
            )
        };

    <!-- С циклом внутри append не работает -->
        let hello = 'Hello world!';
        $('.second').append(
            '<p>' + hello + '</p>' +
            for (let i = 1; i <= 6; i++) {
                '<div class="test">' + i + '</div>'
            }
            )
  • Вопрос задан
  • 149 просмотров
Решения вопроса 1
mizutsune
@mizutsune
Frontend Developer
Почему не работает for внутри append?


Потому что это синтаксическая ошибка. Цикл for не будет возвращать подобным образом массив с шестью элементами, которые вы пытаетесь вставить как набор HTML тегов в элемент с классом second.

Чтобы добиться желаемого результата, конкретно в данном случае, вы можете сделать например так:

const getSetOfElements = () => {
     let arr = [];

     for (let i = 1; i <= 6; i++) {
          arr.push(`<div class="test">${i}</div>`);
     }

     return arr;
}

const setOfElements = getSetOfElements();

$('.second').append(`<p>hello</p> ${setOfElements.join("")}`);


Или:

const setOfElements = [...Array(6)].map((_, i) => (`<div class="test">${i + 1}</div>`)).join("");

$('.second').append(`<p>hello</p> ${setOfElements}`);


Чтобы более корректно описать суть вашей ошибки, понадобиться много букв и возможно вам будет не интересно читать, а мне жалко тратить своё время. Поэтому можете пройтись по документации, ознакомиться с синтаксисом языка. Многое сразу встанет на свои места.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы