移动端字母索引定位功能

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值