How to sort html content (sort by author, sort by date etc) using Javascript

Question

I recently started learning javascript so i dont know much yet which is why i needed a some help and guidance.. , I want to make a list of images with links on a page which can be sorted in the order I want after clicking on "sort by author" or "sort by date" for example.. I tried to make something :

   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>

So when i did something like Sortbyauthor("johngreen") it worked but when the number of authors gets to 8-9 with 10-12 books the amount of code gets very repetitive and long plus the alignment of images gets weird.

So if anyone could guide me on how to make a sorting program that would be very helpful. After getting some practice with how DOM works I am planning to learn jQuery so if jQuery is needed for things like sorting then ill wait till I learn that.

Sorry if i posted this in the wrong forum or something its my first post...

Answer 1

Click run code snippet, then click sort

 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>