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 相关文章推荐
Js event事件在IE、FF兼容性问题
Jan 01 Javascript
js读写cookie实现一个底部广告浮层效果的两种方法
Dec 29 Javascript
jquery网页回到顶部效果(图标渐隐,自写)
Jun 16 Javascript
JS实现的另类手风琴效果网页内容切换代码
Sep 08 Javascript
JavaScript数据存储 Cookie篇
Jul 02 Javascript
JavaScript实现星星等级评价功能
Mar 22 Javascript
vue.js 上传图片实例代码
Jun 22 Javascript
Angular实现的内置过滤器orderBy排序与模糊查询功能示例
Dec 29 Javascript
在Vue中使用Compass的方法
Mar 02 Javascript
jQuery中DOM操作原则实例分析
Aug 01 jQuery
vue.js实现三级菜单效果
Oct 19 Javascript
JavaScript实现刮刮乐效果
Nov 01 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
PHP4实际应用经验篇(5)
2006/10/09 PHP
PHP 读取文件内容代码(txt,js等)
2009/12/06 PHP
用Simple Excel导出xls实现方法
2012/12/06 PHP
优化PHP代码技巧的小结
2013/06/02 PHP
解析dedeCMS验证码的实现代码
2013/06/07 PHP
php中文验证码实现示例分享
2014/01/12 PHP
ThinkPHP中pathinfo的访问模式、路径访问模式及URL重写总结
2014/08/23 PHP
php文件夹的创建与删除方法
2015/01/24 PHP
PHP中iconv函数知识汇总
2015/07/02 PHP
PHP下SSL加密解密、验证、签名方法(很简单)
2020/06/28 PHP
Laravel 5.4向IoC容器中添加自定义类的方法示例
2017/08/15 PHP
PHP Laravel 上传图片、文件等类封装
2017/08/16 PHP
详解php伪造Referer请求反盗链资源
2019/01/24 PHP
laravel 执行迁移回滚示例
2019/10/23 PHP
js操作iframe的一些方法介绍
2013/06/25 Javascript
js弹窗返回值详解(window.open方式)
2014/01/11 Javascript
Node.js文件操作详解
2014/08/16 Javascript
jQuery实现选中弹出窗口选择框内容后赋值给文本框的方法
2015/11/23 Javascript
BootStrap中Datepicker控件带中文的js文件
2016/08/10 Javascript
JS中的hasOwnProperty()、propertyIsEnumerable()和isPrototypeOf()
2016/08/11 Javascript
layui分页效果实现代码
2017/05/19 Javascript
vue axios封装及API统一管理的方法
2019/04/18 Javascript
Vue中axios的封装(报错、鉴权、跳转、拦截、提示)
2019/08/20 Javascript
python清除字符串里非数字字符的方法
2015/07/02 Python
浅谈python新手中常见的疑惑及解答
2016/06/14 Python
Python设计模式之抽象工厂模式
2016/08/25 Python
Django原生sql也能使用Paginator分页的示例代码
2017/11/15 Python
python库matplotlib绘制坐标图
2019/10/18 Python
Python 用turtle实现用正方形画圆的例子
2019/11/21 Python
pyecharts绘制中国2020肺炎疫情地图的实例代码
2020/02/12 Python
PyCharm 光标变成黑块的解决方式
2021/02/06 Python
加拿大知名的国际儿童品牌:Hatley
2016/11/09 全球购物
关于人生的感言
2014/01/17 职场文书
我的未来不是梦演讲稿
2014/09/02 职场文书
小学生作文批改评语
2014/12/25 职场文书
财务统计员岗位职责
2015/04/14 职场文书