Метод .empty () изменяет количество возвращаемых результатов

Question

Я очень зеленый для кодирования и нуждаюсь в помощи по технической проблеме. Я использую Ajax для отправки запроса, который должен вернуть 10 результатов. Это делает это, однако, когда я ввожу пустой метод, чтобы очистить div, содержащий результаты, чтобы отправить новый запрос, который запускается обработчиком событий, он отображает только один результат вместо десяти.

Я опустил $ (# return) .empty (), чтобы убедиться, что мой код работает и возвращает 10 результатов.

            url: queryURL,
            method: "GET"
        }).then(function(response){
            console.log(response.data);

            var imageResults = response.data;

            for (var i=0; i<imageResults.length; i++){
                var gifDiv = $("<div id='returns'>");
                var rating = imageResults[i].rating;
                var ratingP = $("<p>").text("Rating: " + rating);
                // console.log(ratingP);
                var giph = $("<img>");
                var stillGiph = imageResults[i].images.fixed_width_small_still.url;
                giph.attr("src", stillGiph);  //Does the attribute need two arguments? Can I pass anim/still giphs in if statements separately? Does if statements for movement need to be a separate function?

                //empty returns div prior to appending new information
                $("#returns").empty();
                gifDiv.append(giph, ratingP);
                $("#returns").prepend(gifDiv);
            };
        });

Answer 1

Вам нужно будет позвонить $("#returns").empty(); перед запуском цикла for.В настоящее время ваш код выполняет что-то вроде

fetch 10 details then
    for detail in details
        empty returns div
        add an item

Что вам нужно, это

fetch 10 details then
    empty returns div
    for detail in details
        add an item