<!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>
1093
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
