Question

我最近开始学习javascript，所以我不知道多少这就是为什么我需要一些帮助和指导..，我想制作一个页面上的链接图像列表，可以按照我想要的顺序排序点击＆＃34;按作者排序＆＃34;或＆＃34;按日期排序＆＃34;例如..我试着做点什么：

   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（＆＃34; johngreen＆＃34;）这样的工作时，它起作用了，但是当作者的数量达到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>

如何使用Javascript对html内容进行排序（按作者排序，按日期排序等）

1 个答案: