利用jQuery Sort 对Dom元素前端排序

一. 背景

· 因种种原因（需求变更时已开发结束数据存储结构改变成本太高、各item项dom结构并不完全一致、选型为古老的webfrom，并且是单项赋值，改为循环改动大），导致只能选用js在前端进行dom排序。

·当然，能在服务端排序尽量在服务端排序，前端尽量只负责展示。

·本文不考虑适用范围，仅是针对于使用jQuery  sort进行排序的例子。

二. 需求

每个项的值为时间字符串，要根据时间先后顺序，在前端排序。

未排序时页面如下图：

这部分的dom结构如下图（class="sort"是自己加的标识，方便取到所有需要排序字段）：

 

三. 实现代码

 //根据时间先后顺序排序
        function Sort() {
            //报错不阻断执行
            try {
                //先取这部分的html代码
                var $domArr = $("#colArr .sort").get();
                //Arr部分排序
                $domArr.sort(function (a, b) {
                    //从每个item内取出时间(class='datespan'为时间容器标识)
                    var $aHtml = $(a).find('.datespan').eq(0).html();//因为燃油是开始时间和结束时间2个时间，所以只取eq0
                    var $bHtml = $(b).find('.datespan').eq(0).html();
                    if ($aHtml && $bHtml) {
                        var $aArr = $aHtml.split('<b>');
                        var $bArr = $bHtml.split('<b>');
                        //取出的html字符串为：
                        //2019-03-27 23:54  <b> LT/</b>      2019-03-27 15:54   <b>Z</b>
                        if ($aArr.length > 0 && $bArr.length > 0) {
                            var aValue = $aArr[0]; //A的北京时间
                            var bValue = $bArr[0]; //B的北京时间
                            var aDate = new Date(aValue);
                            var bDate = new Date(bValue);
                            if (aDate > bDate)
                                return 1   //倒序排则-1
                            else
                                return -1
                        }
                    }
                });
                console.log($domArr);
                $("#colArr").html($domArr);
 
                
            } catch (e) {
                
            }
 
        }

四. 实现效果

排序后如图