html:
<div class="container">
<div class="letter">
</div>
<div class="list">
</div>
</div>
js:
//右侧字母
var letter = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'X', 'Y', 'Z'];
var lettetHtml = '<ul>';
var listHtml = '';
var name = ['aa', 'aaw','bb', 'cc', 'dd', 'ee', 'ff', 'gg', 'hh','ii', 'jj', 'kk', 'jack are you', 'hack', 'sack','vack','nack',];
var liHtml="";
for(var i = 0; i < letter.length; i++) {
//右侧
lettetHtml += '<li>' + letter[i] + '</li>';
//列表
listHtml += '<div class="listEver" id="' + letter[i] + '">' +
'<p>' + letter[i] + '</p>' +
'<ul></ul>' +
'</div>';
}
$('.letter').html(lettetHtml + '</ul>'); //右侧
$('.list').html(listHtml); //列表
for(var i = 0; i < letter.length; i++) {
for(var j = 0; j < name.length; j++) {
if(name[j].indexOf(letter[i].toLowerCase()) == 0){
liHtml = '<li>' + '<i class="iconfont icon-boshimao"></i>' + '<span>' + name[j] + '<span>' + '</li>';
$('#'+letter[i]).find('ul').append(liHtml);
}
};
}