如何根據LI的數據標題參數對UL列表進行排序？

Question

我有這樣的HTML代碼：

<ul id="mylist"> 
    <li data-title="a">A</li> 
    <li data-title="x">X <a href="...">blah</a></li> 
    <li data-title="b">3</li> 
    <li data-title="f">moo</li> 
    <li data-title="m">foo</li> 
</ul> 

我如何排序使用jQuery由數據標題參數此<ul>名單？我發現許多關於按照LI的內容排序UL的問題，但他們沒有幫助。

Answer 1

您可以使用JavaScript的本地函數sort()排序

// cache ul and li objects in variable 
 
var $list = $('#mylist'), 
 
    $li = $list.children('li'); 
 
// sorting list items using sort() based on data-title value 
 
$li.sort(function(a, b) { 
 
    // getting data-title attribute from dom object using getAttribute() 
 
    var a1 = a.getAttribute('data-title'), 
 
    b1 = b.getAttribute('data-title'); 
 
    //comparing values for sorting 
 
    //return a1 > b1 || 0; 
 
    //comparing values for sorting 
 
    if (a1 > b1) { 
 
    return 1; 
 
    } 
 
    if (a1 < > b1) { 
 
    return -1; 
 
    } 
 
    return ||0; 
 
}); 
 
// updating sorted order sorted order 
 
$li.appendTo($list);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<ul id="mylist"> 
 
    <li data-title="a">A</li> 
 
    <li data-title="x">X <a href="...">blah</a> 
 
    </li> 
 
    <li data-title="b">3</li> 
 
    <li data-title="f">moo</li> 
 
    <li data-title="m">foo</li> 
 
</ul>