リストの並べ替え

<div>
<ul>
<li>その１</li>
<li>その２</li>
<li>その３</li>
</ul>
</div>

とあるときに、「今どのページにいるかによって」リストの順序を変更する方法はありますか？

・全部で３ページある
・この３項目が常に上部に表示されている
・「その２」のページにいるときは、その２を一番最初に表示したい
・「その３」のページにいるときは、その３を一番最初に表示したい

リストの入れ替えをcssで指示することはできるのでしょうか？

No.1 ベストアンサー 回答者： Ogre7077 回答日時： 2022/09/13 16:18

ページURLからどのページかを識別する仕組みを用意する

それぞれの <li> にクラス名をつける
ページに対応したクラス名の <li> があれば先頭に並べ替える
というスクリプトを組む

例)
<ul>
<li class=top1>...
<li class=top2>...
<li class=top3>...
</ul>
<script>
var path = location.pathname;
var topc = [[/page2/,"li.top2"], [/page3/,"li.top3"]].find(x=>x[0].test(path));
if (topc) {
var li = document.querySelector(topc[1]);
li.parentNode.insertAdjacentElement('afterbegin', li);
}
</script>

この回答へのお礼

回答ありがとうございます。
スクリプトはさっぱりですがいただいた例を参考に調べてみます。

お礼日時：2022/09/13 16:58