您的位置：首页 > Web前端 > JQuery

使用jQuery对List排序

2016-07-11 17:06 567 查看

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>使用jQuery对List排序</title>
<script src="jquery/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#lnk").click(function(){
var mylist = $('ul');                         //获取ul对象
var listitems = mylist.children('li').get();  //获取ul对象中的所有li元素,使用get转换为数组
listitems.sort(function(a, b) {              //调用Array对象的sort方法进行排序
var compA = $(a).text().toUpperCase();     //转换字符值为大写
var compB = $(b).text().toUpperCase();
console.log($(a).text());
//比较2个字符串，如果大于则返回1，等于返回0，于小返回-1
return (compA < compB) ? -1 : (compA > compB) ? 1 : 0;
})
$.each(listitems, function(idx, itm) { mylist.append(itm); });
});
});
</script>
</head>

<body>
<!--用来排序的无序列表元素-->
<ul id="ul1">
<li>Apple</li>
<li>Orange</li>
<li>Bananas</li>
<li>Peach</li>
<li>Zeach</li>
<li>ceach</li>
</ul>
<!--单击按钮来进行排序-->
<a href="#" id="lnk">单击这里排序</a>
</ul>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航