Panda Noir

JavaScript の限界を究めるブログでした。最近はいろんな分野を幅広めに書いてます。

zennの記事をlikes数でソートする

like数順でソート ← この保存用リンクをブックマークバーにドラッグ&ドロップするとすぐ保存できます。

実際の中身はこんな感じです↓

javascript:(function(){
  const articles = [...document.querySelectorAll('article')].sort((a,b)=>
    Number(b.querySelector('.ArticleCard_likes__I1qs3')?.textContent ?? 0) 
    - Number(a.querySelector('.ArticleCard_likes__I1qs3')?.textContent ?? 0)
  );
  const container = articles[0].parentNode;
  articles.forEach(article=>container.appendChild(article));
})();

わかりやすく書くとこう↓

const getLikes = (el) => Number(el.querySelector('.ArticleCard_likes__I1qs3')?.textContent ?? 0);
const articles = [...document.querySelectorAll('article')].sort((a, b) => getLikes(b) - getLikes(a));
const container = articles[0].parentNode;
for (const article of articles)
  container.appendChild(article);

実際に実行してみるとちゃんとソートされてる↓

仕組みとしては単純。

  1. article要素を全部取得
  2. article内のlike数をもとにソート
  3. その順番になるよう並べ替えてる