任何人都可以幫助我如何根據時間對 div 進行排序嗎？ js

Question

我想根據 div .inner h6的日期和時間對這些 html 進行排序。 我嘗試了很多 javascript 並不能成功。 我是 js 新手，請幫忙

<div class="root-history">
    <div class="inner sc">
        <span>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galle</span><br>
        <h6>7/13/2021 8:10:20 PM</h6>
    </div>

 
    <div class="inner sc">
        <span>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galle</span><br>
        <h6>7/13/2021 8:11:55 PM</h6>
   </div>
 
    <div class="inner sc">
        <span>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galle</span><br>
        <h6>7/13/2021 8:10:12 PM</h6>
    </div>
 
    <div class="inner sc">
        <span>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galle</span><br>
        <h6>7/13/2021 8:10:43 PM</h6>
    </div>
 
    <div class="inner sc">
        <span>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galle</span><br>
        <h6>7/13/2021 8:10:34 PM</h6>
    </div>
</div>

Answer 1

像這樣的東西？

• 我們通過new Date(a.querySelector("h6").innerText) - new Date(b.querySelector("h6").innerText)
• 我們正在按照相應的順序重新添加孩子

 const root = document.getElementById("root"); [...root.querySelectorAll(".inner")] .sort((a, b) => (new Date(a.querySelector("h6").innerText) - new Date(b.querySelector("h6").innerText))).forEach(e => root.appendChild(e));

 <div class="root-history" id="root"> <div class="inner sc"> <span>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galle</span><br> <h6>7/13/2021 08:10:20 PM</h6> </div> <div class="inner sc"> <span>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galle</span><br> <h6>7/13/2021 08:11:55 PM</h6> </div> <div class="inner sc"> <span>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galle</span><br> <h6>7/13/2021 08:10:12 PM</h6> </div> <div class="inner sc"> <span>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galle</span><br> <h6>7/13/2021 08:10:43 PM</h6> </div> <div class="inner sc"> <span>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galle</span><br> <h6>7/13/2021 08:10:34 PM</h6> </div> </div>