按类内容对HTML列表进行排序

Question

我有一个HTML书籍列表，其中包含多个元素：

• ，这本书的书名
• ，作者的名字
• ，无论这本书是否已经完成(完成/正在进行)
• ，书中的内容提要

我正在尝试做一个按钮，可以让我根据一本书是否已经完成或正在进行来排序列表。此外，我希望列表按标题按字母顺序排列(这样，最终，所有完成的书都会以字母顺序出现在顶部)。

我想要完成的另一件事是让列表按优先级按升序排序，然后，如果列表已经按升序排列，则按降序排序。这不是超级重要，但很高兴有。

由于我无法控制的原因，所有这些都需要在纯javascript中:(

不幸的是，到目前为止我还没有运气。下面是我现在的代码：

HTML：

<button class="button-9" onclick="sortByCompleted()">Sort by Completed</button>
<ul class="links-list" id="id01">
<li>
    <a class="is-external-link" href="www.google.com">TITLE 1<span class="author" style="color:black">by AUTHOR1</span><span class="badge">Ongoing</span>
        <em>Synopsis 1</em>
    </a>
</li>
<li>
    <a class="is-external-link" href="www.twitter.com">TITLE 3<span class="author" style="color:black">by AUTHOR3</span><span class="badge">Ongoing</span>
        <em>Synopsis 3</em>
    </a>
</li>
<li>
    <a class="is-external-link" href="www.facebook.com">TITLE 2<span class="author" style="color:black">by AUTHOR3</span><span class="badge">Completed</span>
        <em>Synopsis 2</em>
    </a>
</li>
</ul>

Javascript：

function sortByCompleted(){
   ul = document.getElementById("id01");
   const li = ul.getElementsByTagName('li');
   const sortedItems = Array.from(li).sort((a, b) => {
      a = a.getElementsByClassName('badge')[0];
      b = b.getElementsByClassName('badge')[0];
      return (a < b) ? -1 : (a > b) ? 1 : 0;
   });
   ul.append(sortedItems[0]);
}

如果有人能帮我一把，我会非常感激的！

Answer 1

到达那里有很多种方法。以下只是其中之一。代码片段基于一个排序函数，该函数可以以CSS选择器的形式接受一个或两个参数，用于从各个元素中提取用于排序的信息。

最新的sel+sel2选择器存储在lis.last属性中。此属性用于确定数组是否需要再次排序，或者是否只需将其颠倒。

​

const ul=document.getElementById("id01"),
  lis=[...ul.querySelectorAll("li")];

function sortBy(sel,sel2=0){
  if (lis.last==sel+sel2) lis.reverse() // reverse the array in place
  else lis.sort((a, b) => { // sort the array in place
    return      a.querySelector(sel ).textContent.localeCompare(b.querySelector(sel ).textContent) 
     || sel2 && a.querySelector(sel2).textContent.localeCompare(b.querySelector(sel2).textContent)
  });
  lis.forEach(li=>ul.append(li)) // put lis back on the page in the new order 
  lis.last=sel+sel2; // remember last selectors
}

<button class="button-9" onclick='sortBy(".badge","a")'>Sort by Completed, Title</button>
<button class="button-9" onclick='sortBy("a")'>Sort by Title</button>
<button class="button-9" onclick='sortBy(".author")'>Sort by Author</button>
<button class="button-9" onclick='sortBy("em")'>Sort by Synopsis</button>
<ul class="links-list" id="id01">
<li>
<a class="is-external-link" href="www.google.com">TITLE 2<span class="author" style="color:black">by AUTHOR1</span><span class="badge">Ongoing</span>
    <em>Synopsis 3</em>
</a>
</li>
<li>
<a class="is-external-link" href="www.twitter.com">TITLE 1<span class="author" style="color:black">by AUTHOR3</span><span class="badge">Ongoing</span>
    <em>Synopsis 1</em>
</a>
</li>
<li>
<a class="is-external-link" href="www.facebook.com">TITLE 3<span class="author" style="color:black">by AUTHOR2</span><span class="badge">Completed</span>
    <em>Synopsis 2</em>
</a>
</li>
</ul>

​