jquery - 排序问题: i have li and i want it to sort by clicking on Asc and Desc

Question

我想对列表进行升序和降序排序。当我单击“升序”时，它将按照与降序相同的升序进行排序，应该使用 jQuery 或任何其他 javascript 库来应用排序。jsfiddle 上添加的示例代码请点击链接

jsfiddle

<p><a href="#" id="asc">Ascending</a> | <a href="#" id="desc">Descending</a></p>
<ul id="test">
<li style="display: inline-block; border: 1px solid transparent;">

    <a href="/redlands/gourmet-pizza-shoppe" rel="962" class="to_business"><span>Gourmet Pizza Shoppe</span></a>
</li>
<li style="display: inline-block; border: 1px solid transparent;">

    <a href="/redlands/therons-frozen-custard" rel="1020"
       class="to_business"><span>Theron's Frozen Custard</span></a>
</li>
<li style="display: inline-block; border: 1px solid transparent;">

    <a href="/redlands/mu-restaurant-and-bar" rel="1024" class="to_business"><span>Mu Restaurant and Bar</span></a>
</li>
<li style="display: inline-block; border: 1px solid transparent;">

    <a href="/redlands/redlands-underground" rel="1026" class="to_business"><span>Redlands Underground</span></a>
</li></ul>

Answer 1

试试这个:-

$(function() {
$('#asc,#desc').click(function() {
    var $sort = this;
    var $list = $('#test');
    var $listLi = $('li',$list);
    $listLi.sort(function(a, b){
        var keyA = $(a).find('span').text();
        var keyB = $(b).find('span').text();
        if($($sort).is('#asc')){
            return (keyA > keyB) ? 1 : 0;
        } else {
            return (keyA < keyB) ? 1 : 0;
        }
    });
    $.each($listLi, function(index, row){
        $list.append(row);
    });
  });
});

<强> Demo