时间戳

首页 > 解决方案 > 如何使用 vanilla JavaScript 按字母顺序对 HTML 元素进行排序？

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

问题描述

我在容器 div 中有这些动物卡片，我想按字母顺序对它们进行排序。我只想使用香草 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>

标签： javascripthtmlsorting

解决方案

这就是我想出的。我选择了所有带有"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>

推荐阅读