JQuery.each 向后打印值

Question

我正在使用 JQuery 检索一个对象并使用它来指向文件夹中的图像并将其打印到滑块中。

问题是我把图像倒过来了，我不明白为什么，因为当我记录值时，它以正确的顺序显示。

这是我的对象：

let mainSliderData

function returnData(){
    mainSliderData = {
        img1: '../vendors/img/slide1/slider.gif',
        img2: '../vendors/img/slide1/slider1.png',
        img3: '../vendors/img/slide1/slider3.png',
        img4: '../vendors/img/slide1/slider4.jpg',
        img5: '../vendors/img/slide1/slider5.jpg',
        img6: '../vendors/img/slide1/slider6.jpg',
        img7: '../vendors/img/slide1/slider7.jpg',
    }

    return mainSliderData
}

JQuery:

$(document).ready(function(){
    $.getScript( "../../data/mainSliderData.js", function( data ) {

        $.each(returnData(), (index, value) => {

            $('<div></div>').css("background-image", `url(${value})`).addClass('slider__img slide--js').prependTo('#test')

            console.log(value)
        })

    }) .fail(function( jqxhr, settings, exception ) {
        console.log('error:')
        console.log(exception)
    })
}) 

控制台：

滑块：

可以看出，原来的顺序是img1 to img7，但是滑块接收的是img7 to img1。

这是个问题，因为顺序对我的项目非常重要。

我该如何解决这个问题？

Answer 1

我认为您需要使用.appendTo('#test')，而不是.prependTo('#test')。