javascript - CSS 按字母顺序排序。我在哪里可以得到消息？

Question

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

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

    <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>

我希望这些列表项在我看来按字母顺序排序。 我怎样才能做到这一点？

Answer 1

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

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

使用 JavaScript 创建排序列表

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

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));