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的面向对象(二)
Nov 09 Javascript
控制打印时页眉角的代码
Feb 08 Javascript
两个DIV等高的JS的实现代码
Dec 23 Javascript
jquery乱码与contentType属性设置问题解决方案
Jan 07 Javascript
PHP 数组current和next用法分享
Mar 05 Javascript
jQuery实现彩带延伸效果的网页加载条loading动画
Oct 29 Javascript
JS使用eval解析JSON的注意事项分析
Nov 14 Javascript
ES6 javascript的异步操作实例详解
Oct 30 Javascript
JS运动特效之链式运动分析
Jan 24 Javascript
package.json各个属性说明详解
Mar 11 Javascript
js实现动态时钟
Mar 12 Javascript
Vue插件之滑动验证码用法详解
Apr 05 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+DBM的同学录程序(2)
2006/10/09 PHP
Can't create/write to file 'C:\WINDOWS\TEMP\...MYSQL报错解决方法
2011/06/30 PHP
Thinkphp中import的几个用法详细介绍
2014/07/02 PHP
js右键菜单效果代码
2007/07/21 Javascript
JavaScript 放大镜 放大倍率和视窗尺寸
2011/05/09 Javascript
javascript实现图片切换的幻灯片效果源代码
2012/12/12 Javascript
Js 冒泡事件阻止实现代码
2013/01/27 Javascript
给Flash加一个超链接(推荐使用透明层)兼容主流浏览器
2013/06/09 Javascript
JS实现点击下载的小例子
2013/07/10 Javascript
使用jQuery mobile库检测url绝对地址和相对地址的方法
2015/12/04 Javascript
简单实现的JQuery文本框水印插件
2016/06/14 Javascript
jquery操作checkbox火狐下第二次无法勾选的解决方法
2016/10/10 Javascript
easyui messager alert 三秒后自动关闭提示的实例
2016/11/07 Javascript
Angular4 中常用的指令入门总结
2017/06/12 Javascript
使用Vue.js开发微信小程序开源框架mpvue解析
2018/03/20 Javascript
Js经典案例的实例代码
2018/05/10 Javascript
详解处理Vue单页面应用SEO的另一种思路
2018/11/09 Javascript
微信小程序学习笔记之表单提交与PHP后台数据交互处理图文详解
2019/03/28 Javascript
JQuery+drag.js上传图片并且实现图片拖曳
2020/11/18 jQuery
Python实现监控程序执行时间并将其写入日志的方法
2015/06/30 Python
Django小白教程之Django用户注册与登录
2016/04/22 Python
Python 中 Virtualenv 和 pip 的简单用法详解
2017/08/18 Python
今天 平安夜 Python 送你一顶圣诞帽 @微信官方
2017/12/25 Python
解决python2 绘图title,xlabel,ylabel出现中文乱码的问题
2019/01/29 Python
Python使用matplotlib 画矩形的三种方式分析
2019/10/31 Python
python实现12306登录并保存cookie的方法示例
2019/12/17 Python
Python第三方库安装缓慢的解决方法
2021/02/06 Python
基于HTML5 Canvas 实现弹出框效果
2017/06/05 HTML / CSS
俄罗斯旅游网站:Tripadvisor俄罗斯
2017/03/21 全球购物
消防先进事迹材料
2014/02/10 职场文书
致跳高运动员加油稿
2014/02/12 职场文书
财务简历的自我评价
2014/03/05 职场文书
2014年青年教师工作总结
2014/12/17 职场文书
干部考核工作总结2015
2015/07/24 职场文书
比赛口号霸气押韵
2015/12/24 职场文书
详解PyTorch模型保存与加载
2022/04/28 Python