JSON格式
[{"name": "Sri Lanka","region":"Asia"}, {"name": "India","region":"Asia"}, {"name": "kenya","region":"Africa"}, {"name": "Zimbabwe","region":"Africa"}]
我想显示如下
- 非洲
- 肯尼亚
津巴布韦
亚洲
- 印度
- 斯里兰卡
尝试
var data = [{ "name": "Sri Lanka", "region": "Asia" }, { "name": "India", "region": "Asia" }, { "name": "Kenya", "region": "Africa" }, { "name": "Zimbabwe", "region": "Africa" }]; $.each(data, function(key, val) { // if `body` does not already have `ul` having // `class` `region` , append `ul` with first `name` // utilize `b` element as "header" for `ul` , // to render `region` "header" above `ul` `li` `name`s if (!$("body ul." + val.region).is("*")) { $("<ul />", { "class": val.region, "html": "<li>" + val.name + "</li>" }) .appendTo("body") .before("<b class=" + val.region + ">" + val.region + "</b>"); } else { // if `b` `textContent` is `region` , // append remaining `name` to `ul` that follows `b` $("b." + val.region).each(function() { if (this.textContent === val.region) { $(this).next("ul").append("<li>" + val.name + "</li>") } }) } });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script>
假设要按地区名称然后按国家名称排序,请按照以下步骤操作。
首先,将国家/地区阵列转换为对象,其属性是国家/地区阵列。 这个中间步骤比直接转换为区域数组更简单。
var regions = {};
$.each(countries, function(i, obj) {
if(!regions[obj.region]) {
regions[obj.region] = [];
}
regions[obj.region].push(obj.name);
});
然后,将regions
对象转换为regions
的排序数组。
var sortedRegions = $.map(regions, function(value, key) {//key is a region name, value is an array of the region's countries
value.sort(function(a, b) { return a.toUpperCase() > b.toUpperCase(); });//sort the arrays of countries alphabetically
return {'region': key, 'countries': value};
}).sort(function(a, b) { return a.region.toUpperCase() > b.region.toUpperCase(); });//sort the mapped array of regions alphabetically
然后将sortedRegions
转换为所需的HTML。
var html = sortedRegions.reduce(function(html_1, r) {
return html_1 + r.countries.reduce(function(html_2, c) {
return html_2 + '<li>' + c + '</li>';
}, '<li>' + r.region + '</li><li><ul>') + '</ul></li>';
}, '<ul>') + '</ul>';
现在,您可以将HTML推送到DOM中:
$("#myContainer").html(html);