jQuery利用sort对DOM元素进行排序操作


Posted in Javascript onNovember 07, 2016

前言

排序对于我们是再熟悉不过了,在绝大数应用程序中都会有这样一个场景:当我们从服务器端获取一个列表时,在界面上进行渲染,我们可以会依赖于某一个规则来进行排序,当然此时绝大多数会再次与服务器进行交互来进行重新渲染列表到客户端,这样做未尝不可,但是在有些情况下,我们既不需要利用框架也不需要重新生成列表到客户端,明明可以在客户端进行,达到我们的目的,为何要再一次发送请求到服务器呢?下面我们来看看。

话题

我们首先看看在w3c中js的sort方法。

<script type="text/javascript">

var arr = new Array(6)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
arr[3] = "James"
arr[4] = "Adrew"
arr[5] = "Martin"

document.write(arr + "<br />")
document.write(arr.sort())

</script>

结果输出:

George,John,Thomas,James,Adrew,Martin
Adrew,George,James,John,Martin,Thomas

如果调用该方法时没有使用参数,将按字母顺序对数组中的元素进行排序,说得更精确点,是按照字符编码的顺序进行排序,但是我们可以自定义排序规则。

我们在sort方法参数中自定义排序函数,如下:

<script type="text/javascript">

function sortNumber(a,b)
{
return a - b
}

var arr = new Array(6)
arr[0] = "10"
arr[1] = "5"
arr[2] = "40"
arr[3] = "25"
arr[4] = "1000"
arr[5] = "1"

document.write(arr + "<br />")
document.write(arr.sort(sortNumber))

</script>

输出如下:

10,5,40,25,1000,1
1,5,10,25,40,1000

如上是在w3c中的例子,是不是sort方法就这么简单呢?有何实际用途没有呢?

我能想到的实际场景:在页面上渲染一个列表时,可能该页内容比较多,我们需要滚动鼠标才能看到其他内容或者说该页前几条内容我们已经看过,想看看其他内容,此时我们需要将页面内容进行反转,我们该如何做呢?

利用sort方法对DOM元素排序

首先我们来看看界面效果,如下:

jQuery利用sort对DOM元素进行排序操作

上述列表是通过日期进行排序,在右上角有一个排序图标,我们需要实现的是点击该排序图标,来实现列表升序和降序的切换。

既然是排序我们首先需要考虑的是要有一个排序规则,我们添加一个排序序号则可以实现在客户端列表的排序或者反转。接下来我们通过ASP.NET MVC来实现演示sort的反转。看下视图代码:

<div id="MessageList">
 @{
  int count = 0;
  foreach (var m in Model)
  {
  count++;
  <div class="message-list-item" data-sort="@count">
   <div class="main-content">
   <div style="margin-top:20px"><a href="#">@m.title</a></div>
   <div class="q_content">
    <p>@m.body</p>
   </div>
   <div class="q_answeroption" style="border-top: 1px dotted #CCC;padding-bottom: 5px;padding-top: 5px;">
    <div class="lf">
    </div>
    <div class="answer_author">
    <a href="#" class="bluelink">@m.author</a>
    <span class="v-split">|</span>
    @m.postDate
    </div>
   </div>
   </div>
  </div>
  }
 }
 </div>

上述class="message-list-item" 有一个特性 data-sort ,通过此特性来实现初始化的排序。该特性会用于进行DOM元素值的比较,紧接着利用sort方法进行排序。其实说则是调用JQuery中的sort方法,最终还是调用js中的sort方法而已。我们需要对列表进行反转,需要以下几步。

(1)定义一个全局变量。

  为什么要定义全局变量?此变量用来保存排序的状态(asc or desc)。

(2)用JQuery来选择列表中的所有元素。

(3)运行JQuery中sort方法来进行排序。

(4)通过detach方法来重新将列表attach到父节点中。

下面给出整个代码。

<script type="text/javascript">
 var sortThread = {};
 $(function () {
  sortThread.sortAscending = true;

  $("#ReverseOrder").on("click", function () {
  sortThread.sortAscending = !sortThread.sortAscending;

  var $msgListItem = $(".message-list-item");

  $msgListItem.sort(function (a, b) {
   var sort1 = a.getAttribute('data-sort') * 1;
   var sort2 = b.getAttribute('data-sort') * 1;

   var sortNum = 1;
   if (!sortThread.sortAscending)
   sortNum = -1;

   if (sort1 > sort2)
   return 1 * sortNum;
   if (sort1 < sort2)
   return -1 * sortNum;

   return 0;
  });

  $msgListItem.detach().appendTo("#MessageList");

  });
 });
 </script>

我们来演示一下:

jQuery利用sort对DOM元素进行排序操作

当然在客户端利用sort不仅仅是反转,还可以排序,如下人员信息列表。

<ul class="peopleList">
 <li data-name="John Doe">Mr. John Doe</li>
 <li data-name="Trent Richardson">Mr. Trent Richardson</li>
 <li data-name="Cindy Smith">Ms. Cindy Smith</li>
 <li data-name="Bill Williams">Mr. Bill Williams</li>
 <li data-name="Jane Doe">Mrs. Jane Doe</li>
</ul>

同理获取上述data-name特性来进行人名排序。

总结

本节通过实际例子来讲述了JQuery中的sort方法。我也是在查资料过程中看到在客户端排序的思路,于是进行了学习并和大家分享下。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript编程起步(第六课)
Jan 10 Javascript
javascript[js]获取url参数的代码
Oct 17 Javascript
基于jquery用于查询操作的实现代码
May 10 Javascript
删除select中所有option选项jquery代码
Aug 12 Javascript
JavaScript的常见兼容问题及相关解决方法(chrome/IE/firefox)
Dec 31 Javascript
Jquery的each里用return true或false代替break或continue
May 21 Javascript
javascript学习笔记--数字格式类型
May 22 Javascript
AngularJS ng-mousedown 指令
Aug 02 Javascript
jquery属性,遍历,HTML操作方法详解
Sep 17 Javascript
vue-infinite-loading2.0 中文文档详解
Apr 08 Javascript
Angular异步变同步处理方法
Aug 13 Javascript
微信小程序访问豆瓣电影api的实现方法
Mar 31 Javascript
AngularJS的ng Http Request与response格式转换方法
Nov 07 #Javascript
easyUI实现(alert)提示框自动关闭的实例代码
Nov 07 #Javascript
AngularJS ng-template寄宿方式用法分析
Nov 07 #Javascript
easyui messager alert 三秒后自动关闭提示的实例
Nov 07 #Javascript
基于bootstrap-datetimepicker.js不支持IE8的快速解决方法
Nov 07 #Javascript
AngularJS 应用身份认证的技巧总结
Nov 07 #Javascript
AngularJS解决ng界面长表达式(ui-set)的方法分析
Nov 07 #Javascript
You might like
简单的PHP留言本实例代码
2010/05/09 PHP
PHP中防止直接访问或查看或下载config.php文件的方法
2012/07/07 PHP
解析smarty模板中类似for的功能实现
2013/06/18 PHP
CI框架文件上传类及图像处理类用法分析
2016/05/18 PHP
PHP版微信第三方实现一键登录及获取用户信息的方法
2016/10/14 PHP
PHP xpath()函数讲解
2019/02/11 PHP
javascript date格式化示例
2013/09/25 Javascript
jQuery中queue()方法用法实例
2014/12/29 Javascript
jQuery实现元素拖拽并cookie保存顺序的方法
2016/02/20 Javascript
Node.js操作mysql数据库增删改查
2016/03/30 Javascript
详解用webpack2.0构建vue2.0超详细精简版
2017/04/05 Javascript
JS实现的input选择图片本地预览功能示例
2018/08/29 Javascript
vue-cli3.0配置及使用注意事项详解
2018/09/05 Javascript
javascript将非数值转换为数值
2018/09/13 Javascript
electron中使用bootstrap的示例代码
2018/11/06 Javascript
Angular2实现的秒表及改良版示例
2019/05/10 Javascript
对vuex中store和$store的区别说明
2020/07/24 Javascript
[02:49:21]2019完美盛典全程录像
2019/12/08 DOTA
Mac中Python 3环境下安装scrapy的方法教程
2017/10/26 Python
使用Python的turtle模块画图的方法
2017/11/15 Python
mac 安装python网络请求包requests方法
2018/06/13 Python
Sanic框架请求与响应实例分析
2018/07/16 Python
python3实现zabbix告警推送钉钉的示例
2019/02/20 Python
使用python来调用CAN通讯的DLL实现方法
2019/07/03 Python
Django在pycharm下修改默认启动端口的方法
2019/07/26 Python
python框架flask入门之环境搭建及开启调试
2020/06/07 Python
在pycharm中debug 实时查看数据操作(交互式)
2020/06/09 Python
Python判断远程服务器上Excel文件是否被人打开的方法
2020/07/13 Python
同程旅游英文网站:LY.com
2018/11/13 全球购物
西班牙Polo衫品牌:Polo Club
2020/08/09 全球购物
澳大利亚最受欢迎的超级商场每日优惠:Catch
2020/11/17 全球购物
什么是典型的软件三层结构?软件设计为什么要分层?软件分层有什么好处?
2012/03/14 面试题
国贸专业大学生职业生涯规划范文
2014/01/10 职场文书
大学生工作自荐书
2014/06/16 职场文书
学习经验交流会策划书
2015/11/02 职场文书
如何书写先进事迹材料?
2019/07/02 职场文书