排序元素

為了有效地對元素進行排序（一次性完成並且 DOM 中斷最少），我們需要：

1. 找到元素
2. **** 根據設定條件排序
3. 插回 DOM

<ul id='my-color-list'>
    <li class="disabled">Red</li>
    <li>Green</li>
    <li class="disabled">Purple</li>
    <li>Orange</li>
</ul>

1. 找到他們 - .children() 或 .find()

   這將為我們提供一個類似陣列的物件。

   var $myColorList = $('#my-color-list');
   
   // Elements one layer deep get .children(), any deeper go with .find()
   var $colors = $myColorList.children('li');
   

2. 重新安排他們 - Array.prototype.sort()

   目前，這是根據 HTML 內容（也稱為其顏色）以升序順序返回元素。

   /**
    * Bind $colors to the sort method so we don't have to travel up
    * all these properties more than once.
    */
   var sortList = Array.prototype.sort.bind($colors);
   
   sortList(function ( a, b ) {
   
       // Cache inner content from the first element (a) and the next sibling (b)
       var aText = a.innerHTML;
       var bText = b.innerHTML;
   
       // Returning -1 will place element `a` before element `b`
       if ( aText < bText ) {
           return -1;
       }
   
       // Returning 1 will do the opposite
       if ( aText > bText ) {
           return 1;
       }
   
       // Returning 0 leaves them as-is
       return 0;
   });
   

3. 插入它們 - .append()

   請注意，我們不需要首先分離元素 - append() 將移動已存在於 DOM 中的元素，因此我們不會有額外的副本

   // Put it right back where we got it
   $myColorList.append($colors);
   

讓它可愛

新增排序按鈕

<!-- previous HTML above -->
<button type='button' id='btn-sort'>
    Sort
</button>

設定排序方向的初始值

var ascending = true;

將我們的 DOM 元素和 sortList() 快取到此處以最小化我們的 DOM 處理

var $myColorList = $('#my-color-list');
var $colors = $myColorList.children('li');
var sortList = Array.prototype.sort.bind($colors);

在 doSort() 功能中包裝所有內容

// Put the sortList() and detach/append calls in this portable little thing
var doSort = function ( ascending ) {

    sortList(function ( a, b ) {
        // ...
    });

    $myColorList.append($colors);
};

為 $('#btn-sort') 新增點選處理程式

$('#btn-sort').on('click', function () {
    // Run the sort and pass in the direction value
    doSort(ascending);

    // Toggle direction and save
    ascending = !ascending;
});

現在都在一起了

var ascending = true;

var $myColorList = $('#my-color-list');
var $colors = $myColorList.children('li');
var sortList = Array.prototype.sort.bind($colors);

var doSort = function ( ascending ) {
    
    sortList(function ( a, b ) {

        var aText = a.innerHTML;
        var bText = b.innerHTML;

        if ( aText < bText ) {
            return ascending ? -1 : 1;
        }

        if ( aText > bText ) {
            return ascending ? 1 : -1;
        }

        return 0;
    });
    
    $myColorList.append($colors);

};

$('#btn-sort').on('click', function () {
    doSort(ascending);
    ascending = !ascending;
});

獎金

多級排序（對已排序的元素進行分組）

// ...

var doSort = function ( ascending ) {

    sortList(function ( a, b ) {

        // ...initial sorting...

    }).sort(function ( a, b ) {
        
        // We take the returned items and sort them once more
        var aClass = a.className;
        var bClass = b.className;
        
        // Let's group the disabled items together and put them at the end

        /**
         * If the two elements being compared have the same class
         * then there's no need to move anything.
         */
        if ( aClass !== bClass ) {
            return aClass === 'disabled' ? 1 : -1;
        }
        return 0;
    });

    // And finalize with re-insert
    $myColorList.append($colors);
};

// ...

你能更進一步嗎？

新增另一個按鈕以切換禁用的組排序

MDN - Array.prototype.sort()