移动端字母索引定位功能

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);
			}
			
		};
	}

猜你喜欢

转载自blog.csdn.net/zyg1515330502/article/details/80354646