如何使用 vanilla JavaScript 按字母顺序对 HTML 元素进行排序？答案

【问题标题】：How to sort HTML elements alphabetically with vanilla JavaScript?如何使用 vanilla JavaScript 按字母顺序对 HTML 元素进行排序？
【发布时间】：2021-09-28 18:21:44
【问题描述】：

我在容器 div 中有这些动物卡片，我想按字母顺序对它们进行排序。我只想使用 vanilla javascript，请不要使用 jquery。

  <div class="animal-container">
<div class="animal-cards">
  <div class="img-container">
    <img src="#">
  </div>
  <div class="animal-info">
    <div class="animal-name">Giraffe</div>
  </div>
</div>
    <div class="animal-cards">
  <div class="img-container">
    <img src="#">
  </div>
  <div class="animal-info">
    <div class="animal-name">Camel</div>
  </div>
</div>
    <div class="animal-cards">
  <div class="img-container">
    <img src="#">
  </div>
  <div class="animal-info">
    <div class="animal-name">Dog</div>
  </div>
</div>
    <div class="animal-cards">
  <div class="img-container">
    <img src="#">
  </div>
  <div class="animal-info">
    <div class="animal-name">Lion</div>
  </div>
</div>

【问题讨论】：

请同时显示您尝试过的javascript代码！你可以从getElementsByclassname()或querySelector()开始
您可以使用数组来存储动物的数据并对数组进行排序并从数组对象中追加 DOM。

标签： javascript html sorting

【解决方案1】：

这就是我想出的。我选择了所有带有 "animal-name" 类的标签。然后将他们的 textContent 存储在一个数组中，对其进行排序，然后将其替换为原始标签

let animals = document.querySelectorAll('.animal-name');

let animalNames = [];
for(let i=0; i<animals.length; i++){
    animalNames.push(animals[i].textContent)
}

animalNames = animalNames.sort();

for(let i=0; i<animals.length; i++){
    animals[i].textContent = animalNames[i];
}

<div class="animal-container">
<div class="animal-cards">
  <div class="img-container">
    <img src="#">
  </div>
  <div class="animal-info">
    <div class="animal-name">Giraffe</div>
  </div>
</div>
    <div class="animal-cards">
  <div class="img-container">
    <img src="#">
  </div>
  <div class="animal-info">
    <div class="animal-name">Camel</div>
  </div>
</div>
    <div class="animal-cards">
  <div class="img-container">
    <img src="#">
  </div>
  <div class="animal-info">
    <div class="animal-name">Dog</div>
  </div>
</div>
    <div class="animal-cards">
  <div class="img-container">
    <img src="#">
  </div>
  <div class="animal-info">
    <div class="animal-name">Lion</div>
  </div>
</div>

【讨论】：

【解决方案2】：

这个想法是对 DOM 元素进行排序，然后以该顺序再次将它们附加到容器元素中：这实际上会以正确的顺序移动这些元素：

const container = document.querySelector(".animal-container");
const key = (a) => a.querySelector(".animal-name").textContent.trim();

Array.from(container.children)
     .sort((a, b) => key(a).localeCompare(key(b)))
     .forEach(child => container.appendChild(child));

<div class="animal-container">
  <div class="animal-cards">
    <div class="img-container">
      <img src="#">
    </div>
    <div class="animal-info">
      <div class="animal-name">Giraffe</div>
    </div>
  </div>
  <div class="animal-cards">
    <div class="img-container">
      <img src="#">
    </div>
    <div class="animal-info">
      <div class="animal-name">Camel</div>
    </div>
  </div>
  <div class="animal-cards">
    <div class="img-container">
      <img src="#">
    </div>
    <div class="animal-info">
      <div class="animal-name">Dog</div>
    </div>
  </div>
  <div class="animal-cards">
    <div class="img-container">
      <img src="#">
    </div>
    <div class="animal-info">
      <div class="animal-name">Lion</div>
    </div>
  </div>
</div>

【讨论】：

【解决方案3】：

您可以通过使用 JS 动态地将元素附加到 DOM 来做到这一点。

例如，

const arr = ["Giraffe", "Camel", "Dog", "Lion"].sort()
arr.forEach((word) => {
     document.getElementById("animal-container").appendChild(
    <div class="animal-cards">
  <div class="img-container">
    <img src="#">
  </div>
  <div class="animal-info">
    <div class="animal-name">{word}</div>
  </div>
    
)})

【讨论】：

append 应改为 appendChild