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

Question

我有一个网格，我想在不手动干预的情况下按字母顺序排列。 IE。我可以继续添加而无需每次都重新按字母顺序排列。网格本身非常简单，只有 3 列，每个 'gridObject' 中有 hyperlink。我希望在页面加载时将网格简单地按 link 文本（或 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 tables/grids 的任何东西。我对这一切都很陌生，所以这在很大程度上是一个学习练习。提前致谢！

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

Answer 2

创建了一个 sortGrid() 函数来对 gridObject 中的所有元素进行排序 class 以使用 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()

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

Alphabetize Grid with... JS? CSS?

javascript

sorting

grid

alphabetical-sort