用... JS 按字母顺序排列网格？ CSS？答案

【问题标题】：Alphabetize Grid with... JS? CSS?用... JS 按字母顺序排列网格？ CSS？
【发布时间】：2021-09-07 09:07:56
【问题描述】：

我有一个网格，我想按字母顺序保留，而无需手动干预。 IE。我可以继续添加而无需每次都重新字母表。网格本身非常简单，每个“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 表/网格的方法。我对这一切都很陌生，所以这在很大程度上是一个学习练习。提前致谢！

【问题讨论】：

您在寻找非 js 解决方案吗？
最有效的。我只是不太了解 js，无法自己弄清楚，但我很想学习
超级有帮助。请注意，底部第三个 div 的 id 应为“iLink”。

标签： javascript sorting grid alphabetical-sort

【解决方案1】：

刚刚写了一个可能有帮助的函数！

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

【讨论】：

嗨@FMoosavi，这个也很好用，但我只能接受一个作为解决方案。感谢您的帮助！

【解决方案2】：

创建了一个 sortGrid() 函数来对 gridObject 类中的所有元素进行排序，以使用 id 的字母顺序进行排序

// Function based on id of element
function sortGrid(){
    const gridObject = document.querySelectorAll('.gridObject')
    let array = [];
    gridObject.forEach(grid =>  array.push(grid.getAttribute("id")))
    array.sort()
    array.forEach((item, index) => array[index] = document.querySelector("#"+item))
    const gridContainer = document.querySelector('#gridContainer');
    gridContainer.innerHTML = ""
    array.forEach(grid => gridContainer.innerHTML += grid.outerHTML)
}

 sortGrid()

【讨论】：