使用jQuery对List排序

来源：互联网发布：php登录简单页面代码编辑：程序博客网时间：2024/06/03 21:10
<!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>
0 0