当页面列表内容很多的时候,我们可能需要将内容按照某个方式进行排序,比如按照字母或者大小等排序。本文将使用排序插件jSort来对页面内容进行排序。
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script><script type="text/javascript" src="jquery.jsort.0.4.js"></script><ul id="nav"> <li id="asc_btn">按标题↑</li> <li id="desc_btn">按标题↓</li></ul><div id="divs"> <div> <img src="images/s1.jpg" alt="" /> <h3 class="title">1.北京利比亚驻华大使馆升起反对派国旗</h3> <p>8月22日,北京利比亚驻华大使馆,门前的国旗已经更换成了反对派的国旗。22日上午11点左右,记者电话采访了利比亚驻华使馆,一位中方工作人员告诉记者,目前未接到闭馆和工作调整的通知,使馆人员应该会照常上班。</p> <p><a href="#">查看详情</a></p> </div> ....多个div</div>#nav{width:100%;margin:10px auto;}#nav li{float:left; width:80px; height:24px; line-height:24px; margin-right:10px; border:1px solid #d3d3d3; background:#f7f7f7; text-align:center; cursor:pointer}#divs div{height:180px; margin:10px 0px; padding:15px; background:#f7f7f7; border-bottom:1px solid #ddd}#divs div img{float:left; width:240px; height:160px; margin:10px}#divs div h3{line-height:24px; margin:10px 5px; font-size:16px; color:#456}#divs div p{line-height:22px; margin:6px 5px}$("#asc_btn").click(function(){ $("#divs").jSort({ sort_by: "h3.title", item: "div", order: "asc" });});is_numsort_by_attrattr_name关于jSort插件的更多信息请访问:
一起学吧部分文章转载自互联网,供读者交流和学习,若有涉及作者版权等问题请及时与我们联系,以便更正、删除或按规定办理。感谢所有提供资讯的网站,欢迎各类媒体与一起学吧进行文章共享合作。