javascript - 如何使用 Javascript 对 html 内容进行排序(按作者排序、按日期排序等)

Question

我最近开始学习 javascript，所以我还不太了解，这就是为什么我需要一些帮助和指导..，我想在页面上制作一个带有链接的图像列表，可以按照我想要的顺序排序例如，点击“按作者排序”或“按日期排序”。我试着做点什么:

   Javascript:

   var wspeare = document.getElementsByClassName("willimshakespeare");
   var jgreen = document.getElementsByClassName("johngreen");
   function Sortbyauthor(author) {
   this.author = author;
   if (author === "williamshakespeare") {
   for(i=0; i<wspeare.length; i++) {wspeare[i].style.display="block";}  
   for(i=0; i<jgreen.length; i++) {jgreen[i].style.display="none";}
   };      
   else if (author === "johngreen") {
   for(i=0; i<wspeare.length; i++) {wspeare[i].style.display="none";}   
   for(i=0; i<jgreen.length; i++) {jgreen[i].style.display="block";}
   };

  HTML:

  <li class="williamshakespeare">
  <a href="example.pdf"><img src="example"/></a>
  </li> 

  <li class="johngreen">
  <a href="example.pdf"><img src="example"/></a>
  </li>

因此，当我执行类似 Sortbyauthor("johngreen") 之类的操作时，它起作用了，但是当作者数量达到 8-9 人，拥有 10-12 本书时，代码量变得非常重复和冗长，而且图像对齐变得奇怪。

因此，如果有人可以指导我如何制作排序程序，那将非常有帮助。在对 DOM 的工作原理进行了一些练习之后，我打算学习 jQuery，因此如果排序等事情需要 jQuery，那么我会等到我学会它。

抱歉，如果我把它发布在错误的论坛上或者这是我的第一篇文章...

Answer 1

点击运行代码片段，然后点击排序

function doSort() {
    //grab all the lis
  var lis=document.getElementsByTagName('li');
  //make an array to place each author into
  var authors=[];
  //go through each li
  for (i=0;i<lis.length;i++) {
  //put the author in the array
  console.log(lis[i]);
  authors.push(lis[i].getAttribute('class'));
  }
  //sort
  authors.sort();
  //get the ul
  var ul=document.getElementById('authors');
  for (i=0;i<authors.length;i++) {
  
  console.log(authors[i]);
  //grab each author in the array
  li=document.getElementsByClassName(authors[i])[0];
  //add it back, sorted
  ul.appendChild(li);

  }
  }

    <input type=button onclick=doSort(); value='click to sort' />
<ul id=authors>
 <li class="williamshakespeare">william shakespeare
  <a href="example.pdf"><img src="example"/></a>
  </li> 

  <li class="johngreen">john green
  <a href="example.pdf"><img src="example"/></a>
  </li>
  
  <li class="henrymiller">henry miller
  <a href="example.pdf"><img src="example"/></a>
  </li>
  
  <li class="stephenking">stephen king
  <a href="example.pdf"><img src="example"/></a>
  </li>
  <ul>