如何使用 vanilla JavaScript 按字母順序對 HTML 元素進行排序？

Question

我在容器 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>

Answer 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>

Answer 2

您可以通過使用 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>
    
)})

Answer 3

這個想法是對 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>