循环输入值并将它们按特定顺序放入对象中

Question

我正在尝试从隐藏的输入字段中获取值并将它们粘贴到我可以通过 AJAX 发布到 url 的对象中。我能够获取这些值，但不是按照我需要它们的顺序。我正在获取这样的值：

var music = {};

var album_name = $(".album_name").each(function() {
    music[$(this).attr("value")] = $(this).val();
     // console.log($(this).val());
});
$(".song_title").each(function() {
    music[$(this).attr("value")] = $(this).val();
     // console.log($(this).val());
});
$(".album_image").each(function() {
    music[$(this).attr("value")] = $(this).val();
     console.log($(this).val());
});

结果是这样的：

{"Album 1":"Album 1","Album 2":"Album 2","Album 3":"Album 3","Album 4":"Album 4","Song 1":"Song 1","Song 2":"Song 2","Song 3":"Song 3","Song 4":"Song 4","thumbnail.png":"thumbnail.png"}

有没有办法让对象按这种顺序出来：

{"Album":"Album 1","Song":"Song 1","Image":"thumbnail.png","Album":"Album 2","Song":"Song 2","Image":"thumbnail.png","Album":"Album 3","Song":"Song 3","Image":"thumbnail.png","Album":"Album 4","Song":"Song 4","Image":"thumbnail.png",}

提前感谢您的帮助。

Answer 1

正如安迪所指出的，物体本质上是无序的。但是，如果您要使用二维数组，则与“1”相关的值可以作为数组的第一个值。

例如：

[{"Album":"Album 1","Song":"Song 1","Image":"thumbnail.png"},{"Album":"Album 2","Song":"Song 2","Image":"thumbnail.png"},{"Album":"Album 3","Song":"Song 3","Image":"thumbnail.png"},{"Album":"Album 4","Song":"Song 4","Image":"thumbnail.png"}]

Answer 2

这与您想要的内容略有不同，但如果您可以考虑订购商品，让您的 JSON 看起来像这样：

{
    "Album 1": {
        "Song":"Song 1",
        "Image":"thumbnail.png"
    },
    "Album 2": {
        "Song":"Song 2",
        "Image":"thumbnail.png"
    },
    "Album 3": {
        "Song":"Song 3",
        "Image":"thumbnail.png"
    }
}

然后当您遍历专辑名称字段时，您可以从相应的歌曲和图像字段中获取数据以添加到数组中。

var album_name = $(".album_name").each(function(a,b) {
    music[$(b).attr("value")] = $(b).val();
    music[$('.song_title')[a].attr("value")] = $('.song_title')[a]).val();
    music[$('.album_image')[a].attr("value")] = $('.album_image')[a]).val();
});

请注意，此解决方案完全取决于这些元素如何呈现到屏幕上。只要它们按照我们抓取它们的顺序呈现（第一张专辑、第一首歌曲、第一张图片、第​​二张专辑……），那么我们就很好了。

Answer 3

这里有几个不同的考虑因素。

• 遍历 JS 对象属性 (for (x in obj){...}) 并不能保证任何特定顺序
• jQuery each() 方法的文档没有说明它如何迭代属性，尽管如果对象是类数组（具有 length 属性），它将被视为一个数组并可能返回按顺序编号的键
• DOM 集合通常确实有定义的顺序；例如document.getElementsByClassName('album_name') 将返回一个类似数组的对象，其中包含所需元素的顺序与它们在源代码中出现的顺序相同（即使 DOM 是动态填充的）。

所以，下面的（非 jQuery）代码：

var albums = document.getElementsByClassName('album_name');
var i=0;
for (i=0;i<albums.length;i++) {
    doSomethingWithAlbumName(albums[i].value);
}

将以正确的顺序处理每个.album_name 输入。我不确定这是否是被问到的；如果您只是想保证 console.log 打印出对象属性的顺序，那是不可能的。