Неправильно строятся div JQuerry

Рейтинг: 0Ответов: 1Опубликовано: 07.06.2023

Всем привет! Вкратце опишу проблему Мой скрипт запрашивает данные из базы(вопросы). Скрипт должен строить div для каждого вопроса

 <script>
        $.getJSON("/questions/all",function (resp){
            $.each(resp, function(index){
                jQuery('<div class = "question">').appendTo('#info')
                $('<div class  ="qHead">').appendTo('.question');
                $('<a class  = "name">').html(this.author.name).appendTo('.qHead')
                $(".name").attr(href = "authors/"+this.author.id);
                $('<h5 class = "date">').html(this.question.dateOfCreation).appendTo('.qHead')
                $('<div class = "qBody">').appendTo(".question")
                $('<a class = "body">').html(this.question).appendTo(".qBody")
            });
        })
    </script>

Скрипт получает JSON

[{"themes":"JAVA","question":"What?","author":{"name":"mish","rating":0,"id":1},"dateOfCreation":1686145863480,"answers":[],"id":1},{"themes":"JOB","question":"Where?","author":{"name":"mish","rating":0,"id":1},"dateOfCreation":1686145863480,"answers":[],"id":2}]

По итогу строит такие div введите сюда описание изображения

введите сюда описание изображения

Выглядит все как вложенный цикл, но используется всего лишь один. Прошу прощения за картинки.

javascript jquery
Источник: Stack Overflow на русском

Ответы

▲ 0Принят

сформируйте разметку целиком, а потом добавляйте в дерево. Сейчас условный appendTo('.class') у вас добавляет ко всем элементам класса, а не только к текущему, который вы строите.

Внутренность цикла примерно следующая должна быть

let html = `<div class="question">
              <div class="qHead">
                <a class="name" href="/authors/${this.author.id}">
                  ${this.author.name}
                </a>
                <h5 class="date>${this.question.dateOfCreation}</h5>
              </div>
              <div class="qBody">
                <a class=body">${this.question}</a>
              </div>
            </div>`;
$(html).appendTo("#info");