如何在页面加载时按字母顺序对 HTML 列表的内容进行排序？ [复制]

Posted 2023-02-21

【中文标题】如何在页面加载时按字母顺序对 HTML 列表的内容进行排序？ [复制]

【英文标题】：How can I sort the contents of an HTML List alphabetically on page load? [duplicate]

【发布时间】：2015-02-11 08:25:59

【问题描述】：

我已经看到了一些例子，但没有找到一种方法来对列表进行排序。

在 Jennifer Perrin 的这个示例中，她展示了如何使用两个链接进行排序（升序排序/降序排序）。

您能否提供一个调整以在页面加载时执行此操作？

标记

<h1>Sort by:
<a href="#" class="link-sort-list asc">Desc</a>
<a href="#" class="link-sort-list desc">Asc</a>
</h1>

<ul id="sort-list">
<li>Orange</li>
<li>Pear</li>
<li>Bananna</li>
<li>Apple</li>
<li>Cucumber</li>
</ul>

jquery

$(document).ready(function() 
$('.link-sort-list').click(function(e) 
    var $sort = this;
    var $list = $('#sort-list');
    var $listLi = $('li',$list);
    $listLi.sort(function(a, b)
        var keyA = $(a).text();
        var keyB = $(b).text();
        if($($sort).hasClass('asc'))
            return (keyA > keyB) ? 1 : 0;
         else 
            return (keyA < keyB) ? 1 : 0;
        
    );
    $.each($listLi, function(index, row)
        $list.append(row);
    );
    e.preventDefault();
);
);

【问题讨论】：

删除click处理程序？

如果有多个link-sort-list 元素，那么只需将click 替换为each，就可以了。

谢谢。我认为这可行，但该网站已经使用 yui 对重量进行排序。我认为

【参考方案1】：

不用点击功能就用这个

$(document).ready(function() 
    var $sort = $('.asc');
    var $list = $('#sort-list');
    var $listLi = $('li',$list);
    $listLi.sort(function(a, b)
        var keyA = $(a).text();
        var keyB = $(b).text();
        if($($sort).hasClass('asc'))
            return (keyA > keyB) ? 1 : 0;
         else 
            return (keyA < keyB) ? 1 : 0;
        
    );
    $.each($listLi, function(index, row)
        $list.append(row);
    );
    e.preventDefault();
);

这里我将 $sort 设置为 asc。但是您可以从任何变量中提供 req 值。希望这行得通。谢谢

【讨论】：

您需要注意$sort 变量。

将其更改为字符串没有帮助。