jQuery的foreach循环顺序
jQuery的foreach循环顺序
我有一对选择框，用户必须先选择国家，然后在该国家中选择一个城市或地区：
第二个需要根据第一个的选择动态更新 - 即只有在选择英国时才显示英国的城市和地区。
这些列表是从数据库生成的，并被设置为一个数组：
var cityOptions =
{
1 :
[
{
37: "伦敦",
1: "贝德福德郡",
2: "伯克郡",
3: "伯明翰",
...
}
]
};
顶部的1是国家ID的引用。
ID号是由数据库自动生成的。我希望首都始终在列表的顶部，并通过在数组打印中使用一个CityOrder字段并按照CityOrder降序排序来实现这一点 - 这就是为什么伦敦（具有CityOrder为1）在列表的顶部，尽管它的ID比其他城市都高，其他城市的CityOrder都是0。
然后我使用jQuery动态更新这些列表：
function updateCityOptions(currentCity)
{
var $countryAll = $("#ListingCity");
var $countrySel = $("#ListingCountry option:selected").val();
if($countrySel!=0)
{
$('#ListingCity option:gt(0)').remove();
$.each(cityOptions[$countrySel], function(k,v)
{
$.each(cityOptions[$countrySel][k], function(k2,v2)
{
if(k2==currentCity)
{
$countryAll.append($('').attr("value", k2).text(v2));
}
else
{
$countryAll.append($('').attr("value", k2).text(v2));
}
});
});
$(".city").fadeIn(300);
}
else
{
$('#ListingCity option:gt(0)').remove();
$(".city").fadeOut(300);
}
}
问题是当选择一个国家时，select框的顺序似乎是按照数组的数字顺序，而不是按照在DOM中的打印顺序 - 即贝德福德郡首先出现在列表中（ID号为1），而伦敦却在中间消失了。
有什么线索吗？
问题的出现原因：
在这个问题中，需要对一个包含城市信息的下拉列表进行排序。然而，排序的方式不是根据ID或名称（文本），而是根据其他值进行排序。为了实现这一点，创建了一个包含所有国家和城市的对象，并将它们添加到列表中。然后，使用这个对象中的排序顺序进行排序，并将其作为data-sort属性添加到选项列表中，并使用一个函数来进行排序。
解决方法：
为了解决这个问题，首先创建了一个命名空间myApp来使用。然后，添加了一个包含国家和城市信息的对象myApp.countries。接下来，添加了一些用于操作对象的函数到命名空间中。其中包括lookup函数用于查找特定属性的值，updateCityOptions函数用于更新城市下拉列表，setCountries函数用于设置国家下拉列表的选项。最后，创建了一个用于排序选项的函数$.fn.sortOptions。
在启动代码中，调用了myApp.arrayObj.setCountries(myApp.countries)来设置国家下拉列表的选项。然后，通过触发国家更改事件$('#ListingCountry').trigger('change')来更新城市下拉列表。
对于这个问题，还提供了一些额外的排序选项。分别是按文本排序的sortOptionsByText函数，按值排序的sortOptionsByValue函数，以及根据"mostused"属性值排序的sortOptions函数。
编辑：注意，如果只保留一个"isCapital": true，可以删除所有"isCapital": false，代码仍然可以正常工作。
这个问题的解决方法提供了一个完整的方案，可以根据特定的排序需求对下拉列表进行排序，并且可以根据国家的更改动态更新城市的选项。
问题的出现原因是对象属性的存储顺序不符合预期。当对对象属性进行迭代时，例如使用$.each，它在对象上执行for ... in循环，属性的迭代顺序将取决于几个因素。首先，它取决于是否在ES6之前的JavaScript版本上运行：在这种情况下，没有任何确定的顺序保证。
ES6对此进行了更改，详见"Sort JavaScript Object by Key"，当对象属性是数字时，它们将按照数字顺序进行迭代。
尽管如此，在所有需要保持顺序的情况下，我建议使用数组。不要使用以下结构：
{
37: "London",
1: "Bedfordshire",
2: "Berkshire",
3: "Birmingham",
...
}
而是使用以下结构：
[
{ id: 37, name: "London"},
{ id: 1, name: "Bedfordshire"},
{ id: 2, name: "Berkshire"},
{ id: 3, name: "Birmingham"},
...
]
... 并将您的代码适应该结构。