我想使用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>我希望这些列表项在我的视图中按字母顺序排序。我如何才能做到这一点?
发布于 2017-11-25 10:56:37
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));https://stackoverflow.com/questions/47481984
复制相似问题