首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >CSS按字母顺序排序。我可以从哪里得到消息?

CSS按字母顺序排序。我可以从哪里得到消息?
EN

Stack Overflow用户
提问于 2017-11-25 09:59:51
回答 1查看 3K关注 0票数 2

我想使用CSS按字母顺序对我的列表进行排序。

例如,假设我有以下未排序的列表

代码语言:javascript
复制
    <ul>
        <li>e </li>
        <li>b </li>
        <li>h </li>
        <li>c </li>
        <li>g </li>
        <li>A </li>
        <li>d </li>
        <li>f </li>
    </ul>

我希望这些列表项在我的视图中按字母顺序排序。我如何才能做到这一点?

EN

回答 1

Stack Overflow用户

发布于 2017-11-25 10:56:37

Css不允许您执行任何类型的逻辑或计算。

您需要使用JavaScript来实现列表项的排序。

使用JavaScript创建排序列表

下面的代码显示了初始化未排序元素列表,然后为排序列表创建DOM并通过ID将其附加到父元素的示例。

代码语言:javascript
复制
var listElements = [ 'e', 'b', 'h', 'c', 'g', 'A', 'd', 'f' ];

function makeSortedList(array) {
    // Create the list element:
    var list = document.createElement('ul');

    // Sort list items
    array.sort();

    for(var i = 0; i < array.length; i++) {
        // Create the list item
        var item = document.createElement('li');

        // Set list item contents
        item.appendChild(document.createTextNode(array[i]));

        list.appendChild(item);
    }

    return list;
}

// Add sorted list to parent (by id)
document.getElementById('foo').appendChild(makeSortedList(listElements));
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/47481984

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档