我想使用 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>
我希望这些列表项在我看来按字母顺序排序。 我怎样才能做到这一点?
最佳答案
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));
关于javascript - CSS 按字母顺序排序。我在哪里可以得到消息?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47481984/