javascript - 用... JS 按字母顺序排列网格?CSS?
问题描述
我有一个网格,我想按字母顺序保持,而不需要手动干预。即我可以继续添加而无需每次都重新字母。网格本身非常简单,每个“gridObject”中只有 3 列带有超链接。我希望在页面加载时简单地按链接文本(或 id?)对网格进行排序,而无需单击任何内容(document.ready 函数?)。
<style>
#gridContainer{
display:grid;
grid-template-columns: auto auto auto;
background-color:#420666;
padding:20px;
}
.gridObject{
min-width: 200px;
background-color:#666420;
margin:15px;
padding:10px;
color:#fff;
}
</style>
<div id="gridContainer">
<div class="gridObject" id="qLink"><a href="">qLink</a></div>
<div class="gridObject" id="wLink"><a href="">wLink</a></div>
<div class="gridObject" id="eLink"><a href="">eLink</a></div>
<div class="gridObject" id="rLink"><a href="">rLink</a></div>
<div class="gridObject" id="tLink"><a href="">tLink</a></div>
<div class="gridObject" id="yLink"><a href="">yLink</a></div>
<div class="gridObject" id="uLink"><a href="">uLink</a></div>
<div class="gridObject" id="uLink"><a href="">iLink</a></div>
<div class="gridObject" id="oLink"><a href="">oLink</a></div>
<div class="gridObject" id="pLink"><a href="">pLink</a></div>
</div>
我正在寻找各种 JS 方法来对数组等进行排序,但除了制作可排序的列之外,还没有找到任何 html 表/网格。我对这一切都很陌生,所以这在很大程度上是一个学习练习。提前致谢!
解决方案
刚刚写了一个可能有帮助的函数!
function sortMyElements() {
var parent = document.getElementById("gridContainer");
var links = Array.from(parent.children);
parent.innerHTML = "";
var sortedLinks = links.sort(
(first, second) =>
first.getAttribute("id").charCodeAt(0) - second.getAttribute("id").charCodeAt(0) //sorting by character code
);
sortedLinks.forEach((link) => parent.appendChild(link));
}
推荐阅读
- bash - 批处理文件无法成功运行 bash 并打开 .sh 文件
- python - AttributeError:未知的属性密度
- android - 如何向 TextView 添加多个可绘制对象?
- sql - SQL - 使用 MAX 获取值
- powershell - 结果按组输出到txt文件
- acumatica - 创建一个通用的弹出面板
- php - 验证自定义创建令牌的 JWT 令牌签名
- python - Python URL 中断系统命令
- kubernetes - Kubelet 服务未启动 - KUBELET_EXTRA_ARGS (code=exited, status=255)
- ios - 在 UITable View Swift 中滚动时图片变得混合