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 相关文章推荐
Prototype源码浅析 String部分(二)
Jan 16 Javascript
jQuery实现动画效果的简单实例
Jan 27 Javascript
js实现图片淡入淡出切换简易效果
Aug 22 Javascript
微信开发 微信授权详解
Oct 21 Javascript
微信小程序 action-sheet 反馈上拉菜单简单实例
May 11 Javascript
AngularJS实现表单验证功能详解
Oct 12 Javascript
关于vue中watch检测到不到对象属性的变化的解决方法
Feb 08 Javascript
详解VSCode配置启动Vue项目
May 14 Javascript
微信小程序实现手势滑动效果
Aug 26 Javascript
解决layer.confirm快速点击会重复触发事件的问题
Sep 23 Javascript
小程序实现长按保存图片的方法
Dec 31 Javascript
vue @click.native 绑定原生点击事件
Apr 22 Vue.js
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
肝肠寸断了解下!盘点史上最伤心的十大动漫
2020/03/04 日漫
ThinkPHP3.2框架自定义配置和加载用法示例
2018/06/14 PHP
js检测客户端不是firefox则提示下载
2007/04/07 Javascript
XML+XSL 与 HTML 两种方案的结合
2007/04/22 Javascript
小试JQuery的AutoComplete插件
2011/05/04 Javascript
分享20个提升网站界面体验的jQuery插件
2014/12/15 Javascript
jQuery仿gmail实现fixed布局的方法
2015/05/27 Javascript
javascript制作幻灯片(360度全景图片)
2015/07/28 Javascript
JS实现简单的右下角弹出提示窗口完整实例
2016/06/21 Javascript
video.js使用改变ui过程
2017/03/05 Javascript
JS实现验证码倒计时的注册页面
2018/01/02 Javascript
vue项目中使用ueditor的实例讲解
2018/03/05 Javascript
Vue中使用vue-i18插件实现多语言切换功能
2018/04/25 Javascript
详解webpack自定义loader初探
2018/08/29 Javascript
微信公众号平台接口开发 菜单管理的实现
2019/08/14 Javascript
LayUI动态设置checkbox不显示的解决方法
2019/09/02 Javascript
原生Vue 实现右键菜单组件功能
2019/12/16 Javascript
jQuery实现简易QQ聊天框
2020/02/10 jQuery
Javascript操作select控件代码实例
2020/02/14 Javascript
vue项目在webpack2实现移动端字体自适配功能
2020/06/02 Javascript
H5 js点击按钮复制文本到粘贴板
2020/11/19 Javascript
Python引用模块和查找模块路径
2016/03/17 Python
pytorch自定义初始化权重的方法
2019/08/17 Python
Python从入门到精通之环境搭建教程图解
2019/09/26 Python
python jenkins 打包构建代码的示例代码
2019/11/29 Python
Python3 操作 MySQL 插入一条数据并返回主键 id的实例
2020/03/02 Python
Django crontab定时任务模块操作方法解析
2020/09/10 Python
加拿大百叶窗和窗帘定制网站:Blinds
2017/01/30 全球购物
2014年幼儿园植树节活动方案
2014/03/02 职场文书
精彩的广告词
2014/03/19 职场文书
创业女性典型材料
2014/05/02 职场文书
人身损害赔偿协议书范本
2014/09/27 职场文书
超市工作总结范文2014
2014/12/19 职场文书
2015年秋季小学开学典礼主持词
2015/07/16 职场文书
物业保洁员管理制度
2015/08/05 职场文书
关于食品安全的演讲稿范文(三篇)
2019/10/21 职场文书