填充 $.each(..) 可以“破坏”我的地图在 IE 中的顺序吗？答案

【问题标题】：Can populating with $.each(..) "destroy" the ordering of my map in IE?填充 $.each(..) 可以“破坏”我的地图在 IE 中的顺序吗？
【发布时间】：2012-05-17 00:14:39
【问题描述】：

我的问题：

我知道这听起来很有趣，但这是我的问题：我有一个 select，它通过 Ajax 以下列方式填充成功：

$.each(data, function(key, value) {
            options += '<option value="' + key + '">' + value + '</option>';
        });

我的服务器返回一个排序地图（按值排序）。一切正常，但在 Internet Explorer（7,8 和 9）中，选择显示为未排序。

我发现了什么：

我发现 IE 实际上按 key 排序显示它，我传递给 value 参数。我的列表在后端按value 排序，我想这样显示它（在 Chrome、Firefox 等上运行良好）。

我认为这种排序的原因很可能是$.each jQuery 函数。也许它正在按键迭代？不过，我不确定这一点，所以我希望得到一些反馈。另外，我怎样才能在地图上进行替代迭代，以确保这一点？我试图避免执行 jQuery 排序，因为排序是在后端完成的。

我提到我需要将key 和value 传递给option，就像我传递它们的方式一样。

编辑 - 示例：

应该如何（在 Chrome 和 Firefox 上）：

<option value="13">A</option>
<option value="2">B</option>
<option value="55">C</option>

在 IE 中是怎样的：

<option value="2">B</option>
<option value="13">A</option>
<option value="55">C</option>

【问题讨论】：

请不要通过附加 HTML 来创建元素。 jQuery 有非常好的 DOM 操作工具。

标签： javascript jquery ajax foreach

【解决方案1】：

您的问题是对象实际上没有键/值对的特定顺序。 IE改变它并没有错。使用数组来保存对，例如：

[
    {
        "value": "13",
        "text": "A"
    },
    {
        "value": "2",
        "text": "B"
    },
    {
        "value": "55",
        "text": "C"
    }
]

然后循环如下：

$.each(data, function(index, option) {
    options += '<option value="' + option.value + '">' + option.text + '</option>';
});

最后，您不应该将 HTML 作为字符串来构建元素。使用 DOM。我想你在某个地方有someElement.html(options);？好吧，改为options = someElement;，然后这样做：

$.each(data, function(index, option) {
    options.append(
        $('<option>').prop('value', option.value).text(option.text)
    );
});

【讨论】：

我已经更改了我的服务器端以创建一个对数组并将其传递给 ajax 调用，现在它可以正常工作了。谢谢。

【解决方案2】：

minitech 是正确的。

尽管假设订单将保留在一个对象中是多么好的，但这并不能保证，并且可能会在任何随机时间（或在 IE 中，一直）中断。

然而，另一种解决方案是传递一个排序数组，该数组具有您想要通过键的顺序。

[
  {
    13: 'A',
    2: 'B',
    55: 'C'
  },
  [ 13, 2, 55 ]
 ]

【讨论】：