排序问题：我有 li，我希望通过单击 Asc 和 Desc 对其进行排序答案

【问题标题】：Sorting issue: i have li and i want it to sort by clicking on Asc and Desc排序问题：我有 li，我希望通过单击 Asc 和 Desc 对其进行排序
【发布时间】：2015-06-17 20:15:19
【问题描述】：

我想对列表进行升序和降序排序。当我单击升序时，它将按与降序相同的升序排序，应使用 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>

【问题讨论】：

现在它简单易懂，我想按 span 标签中的文本和标签中的文本对列表进行排序
那么你卡在哪里了？抱歉，您显然正在努力（缩短标记等，以便很好地包含问题），但目前这读起来有点像“请为我编写这个排序代码”。试一试，浏览jQuery API，如果您遇到困难，请发布您的努力，人们会很乐意为您提供帮助。

标签： jquery html sorting

【解决方案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

【讨论】：

【解决方案2】：

$(document).ready(function() {
    $('#asc, #desc').on('click', function() {

        var sortMethod = $(this).attr('id');
        var options = $('ul#test > li');

        options.sort(function(a, b){
            var aText = $(a).find('a span').text();
            var bText = $(b).find('a span').text();
            if(sortMethod == 'asc'){
                return aText.localeCompare(bText);
            }else{
                return bText.localeCompare(aText);
            }
        });

        $('ul#test').append(options);
    });
});

【讨论】：

你可以添加一些解释而不是只发布代码