一. 背景

· 因種種原因（需求變更時已開發結束資料儲存結構改變成本太高、各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) {
                
            }
 
        }

四. 實現效果

排序後如圖