一个项目的时候出现了一个获取品牌列表，并按照首字符的拼音或者英文的首字母A-Z排序的需求，如图所示：
由于html页面里面还用到了art-template的模板循环，最开始写出来的时候列表是循环了出来，但是并没有按照A-Z的分组，而是很多A,A,A，很多B,B,B，很多C,C,C，等等，问题困扰了很久，后来经人帮助用map的键值对方法得到了解决。
html代码如下：
<!DOCTYPE html>页面的JS如下：
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>分类</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<link rel="shortcut icon" href="/favicon.ico">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../../css-sui/shop/shopIndex.css">
<script src="../../js/base/require.js" data-main="../../js-sui/shop/brandClassify"></script>
</head>
<body>
<div class="page-group">
<div class="page page-current">
<!--header start-->
<header class="bar bar-nav headerBar">
<a class="icon icon-iconfontback pull-left back"></a>
<div class="sousuoInput pull-left" style="width: 65%">
<em class="icon icon-iconfontsousuo"></em>
<input type="text" class="search_mall" placeholder="乐高玩具"/>
</div>
<a href="http://m.gohomeplay.com/toMessageIndex.do" class="info pull-right" external><em class="icon icon-xiaoxi"></em></a>
<a href="http://m.gohomeplay.com/cart/toSessionCart.do" class="cart pull-right" external>
<em class="icon icon-iconfontgouwuche"></em>
</a>
</header>
<!--header end-->
<div class="content list-container">
<div class="buttons-tab fixed-tab" data-offset="44">
<a href="#tab1" class="tab-link active button">分类</a>
<a href="#tab2" class="tab-link button">品牌</a>
</div>
<div class="brandClassifyBox">
<div class="tabs">
<div id="tab1" class="tab active">
<div class="classifyBox">
<ul class="classifyNav">
</ul>
<div class="classifyDetail" id="classifyDiv">
<div class="box">
<div class="classifyTitle">[本季热卖]</div>
<ul class="row">
</ul>
</div>
</div>
</div>
</div>
<div id="tab2" class="tab">
<ul class="anchorUl" id="key-list">
</ul>
<div class="list-block contacts-block">
<div class="list-group">
<ul id="value-list">
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script id="keyTmpl" type="text/html">
{{each}}
<li><a href="#{{$value.key}}" class="red" external>{{$value.key}}</a></li>
{{/each}}
</script>
<script id="valueTmpl" type="text/html">
{{each itemlist as item}}
<li class="list-group-title" id="{{item.key}}">{{item.key}}</li>
{{each item.listvalue}}
<li>
<div class="item-content" onclick="window.location='http://m.gohomeplay.com/getProductByBrandId.do?productBrandId={{$value.id}}&brandName={{$value.brandName}}'">
<div class="item-media"><img src="{{$value.brandLogoUrl}}"/></div>
<div class="item-inner">
<div class="item-title" id="{{$value.id}}">{{$value.brandName}}</div>
</div>
</div>
</li>
{{/each}}
{{/each}}
</script>
</body>
</html>
require.config({
paths: {
"base": "../../js/base/base",
"secMenu":"../../js/base/secMenu",
"template": "../../js/base/template"
}
});
function loadXMLDoc(a,parentId){
$(".classifyNav li").removeClass("curr");
$(".classifyNav li").eq(a).addClass("curr");
getChildNode(parentId);
}
//获取子类目
function getChildNode(parentId){
$.ajax({
type: "GET",
url: "http://m.gohomeplay.com/service/productCategoryAdapter/getChildNode",
data: {'parentId':parentId},
dataType: "json",
success: function(data){
if (data.code == "0") {
$('.box ul').empty(); //清空box ul里面的所有内容
var html = '';
$.each(data.data, function(commentIndex, comment){
html += '<li class="col-33" onclick="window.location=\'teBuyListTwo.do?categoryId='+comment.id+'\'">'+'<img src="'+comment.categoryPicUrl+'" alt=""><span>'+comment.categoryName+'</span></li>';
});
$('.box ul').html(html);
}
}
});
}
define(['base','template'], function (base,template){
$(function() {
$(".anchorUl").height($(window).height()*0.8);
getTopNode();
getChildNode();
getProductBrandList();
$(".sousuoInput input").focus(function(){
window.location='http://m.gohomeplay.com/teBuy/search_result.html';
});
});
// 获取顶层类目
function getTopNode (){
$.ajax({
type: "GET",
url: "http://m.gohomeplay.com/service/productCategoryAdapter/getTopNode",
data: {},
dataType: "json",
success: function(data){
if (data.data!=null) {
$('.classifyNav').empty(); //清空resText里面的所有内容
var html = '';
$.each(data.data, function(commentIndex, comment){
if(commentIndex==0){
html += '<li class="curr" onclick="loadXMLDoc('+commentIndex+','+comment.id+')">' + comment.categoryName
+ '</li>';
getChildNode(comment.id);
} else{
html += '<li onclick="loadXMLDoc('+commentIndex+','+comment.id+')">' + comment.categoryName
+ '</li>';
}
});
$('.classifyNav').html(html);
}
}
});
}
var map = getMap();
//获取品牌列表
function getProductBrandList(){
$.ajax({
type:"GET",
url:"http://m.gohomeplay.com/service/product/findProductBrandList",
data:{},
dataType:"json",
success:function(data){
if(data.code=="0"){
$('.list-group ul').empty(); //清空 ul里面的所有内容
var html = '';
$.each(data.data, function(commentIndex,comment){
//html += '<li><div class="item-content"><div class="item-media"><img src="'+comment.brandLogoUrl+'"/></div><div class="item-inner"><div class="item-title" id="'+comment.id+'">'+comment.brandName+'</div></div></div></li>';
var key = (comment.brandNameSpell).slice(0,1).toLocaleUpperCase();
var temp = map.get(key);
if(temp!=undefined && temp!=null){
temp.push(comment);
map.remove(key);
map.put(key,temp);
} else{
var values = [];
values.push(comment);
map.put(key,values);
}
});
var keys = [];
var values = [];
map.each(function(key,value,index){
keys.push({"key":key});
values.push({"key":key,"listvalue":value});
});
$("#key-list").append(template("keyTmpl",keys));
$("#value-list").append(template("valueTmpl",{"itemlist":values}));
}
}
});
}
});
引用map用法在base.js里面，引用部分代码如下：
getMap=function(){
/** 存放键的数组(遍历用到) */
var keys = new Array();
var map_ = new Object();
var data = new Object();
map_.put = function(key, value) {
if(data[key] == null){
keys.push(key);
}
data[key] = value;
map_[key] = value;
};
map_.keys = function(key, value) {
if(map_[key] == null){
keys.push(key);
}
};
map_.get = function(key) {
return map_[key];
};
map_.remove = function(key) {
delete map_[key];
};
map_.each = function(fn){
if(typeof fn != 'function'){
return;
}
var len = keys.length;
for(var i=0;i<len;i++){
var k = keys[i];
fn(k,data[k],i);
}
};
map_.keyset = function() {
var ret = "";
for(var p in map_) {
if(typeof p == 'string' && p.substring(p.length-1) == "_") {
ret += ",";
ret += p.substring(0,p.length-1);
}
}
if(ret == "") {
return ret.split(",");
}else{
return ret.substring(1).split(",");
}
};
return map_;
};具体map用法还有待深究，代码先码在这里咯。