jSort页面内容排序

收藏

通过jSort插件，内容可按照字母或者数字等排序。

0、请不要问“在不在”之类的问题，有问题直接问！1、学生或暂时没有工作的童鞋，整站资源免费下载！2、￥9.9充值终身VIP会员,加我微信，826096331 拉你进VIP群学习！3、程序员加油,技术改变世界。在线 充值

查看演示

加我微信，拉你进VIP群学习：

下载资源 下载积分： 30 积分

首先载入jquery库和jSort插件。

<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript" src="jsort.js"></script>

HTML

接着我们在#ul放置5个标题，用来排序。#asc_btn用来按标题顺序排序，#desc_btn则按倒序。

<ul id="nav">
   <li id="asc_btn">按标题↑</li>
   <li id="desc_btn">按标题↓</li>
</ul>
<ul id="ul"> 
   <li> <h3 class="title">1.首页</h3> <p>提供网站模板,网站源码,网页图标,网页特效,中文字体等网页设计素材下载,为广大网友制作网页提供网站素材免费下载参考</p> <p><a href="http://www.erdangjiade,com">点击查看</a></p> </li> 
   <li> <h3 class="title">2.网站模板</h3> <p>网站模板,网站模板,网站模板下载,免费网站模板,素材火 </p> <p><a href="http://www.erdangjiade.com/templates">点击查看</a></p> </li> 
   <li> <h3 class="title">3.网页特效</h3> <p>JS代码频道为网页前端人员提供建站常用的网页特效,包括图片代码、导航菜单、选项卡/滑动门资源、文字特效、表单代码、提示框/浮动层/弹出层等资源</p> <p><a href="http://www.erdangjiade.com/js">点击查看</a></p> </li> 
   <li> <h3 class="title">4.网站导航</h3> <p>精选网站以用户为导向，致力于快速为互联网用户提供设计优秀的网站信息，同时肩负着打击虚假网站的职责</p> <p><a href="http://www.erdangjiade.com/site">点击查看</a></p> </li> 
   <li> <h3 class="title">5.网站源码</h3> <p>网站源码提供精品pc源码、app源码、wap源码等。</p> <p><a href="http://www.erdangjiade.com/js">点击查看</a></p> </li> 
</ul>

jQuery

$(function() {
    $("#asc_btn").click(function() {
        $("#ul").jSort({
            sort_by: 'h3.title',//指向item内需要排序的元素，默认为p，本例中要排序的是h3.title。
            item: 'li',//要排序的内容
            order: 'asc' //排序方式，asc-顺序，desc-倒序，默认为asc。
        });
    });

    $("#desc_btn").click(function() {
        $("#ul").jSort({
            sort_by: 'h3.title',
            item: 'li',
            order: 'desc'
        });
    });
});