機能テスト箇条書き

Hidekichi

2023年6月11日

2023年6月12日

.reverseでul,olの中のliを逆順に出力

通常表示。何もしてないただのリストです。

reverseさせたもの

[info]これらはORICON 2023年05月15日付のランキングです。[/info]

逆順てなんだよと思われた方にはこれですぐに理解してもらえものではなかろうかと思います。これらは、

<ul class='reverse'>
  <li>list-item1</li>
  <li>list-item2</li>
  <li>list-item3</li>
</ul>

こんな感じで書いてあります。list-itemが1-2-3と並ぶ所を、3-2-1となるわけです。
もしlist-itemにsub-itemがあった場合でもlist-itemの順番が変わるだけでsub-itemはそのままです。

逆順になった場合でもリストマーカーはそのままです。
もしこれを変えようとする場合は、

<ul class='reverse' reversed>
  <li>list-item1</li>
  <li>list-item2</li>
  <li>list-item3</li>
</ul>

とすれば、

.reverse と reversed属性をプラス

このように、リストマーカーも逆順になります。
ulの場合は、リストマーカーが同じですからクラスに.reverseを入れるだけでokです。

これらは主に編集時にはリストの最後にアイテムを追加して行って、表示はその逆になるので、何かしらの更新項目を新しい順に表示したい場合、あるいはこのサンプル例のように何かしらのランキングの順位が低いものから表示したい場合などに使えるかと思います。
それ以外での使用例は思いついてないんですけども。

[info blue]今の所、ulとolのみに.reverseは使用できます。
dlとか何でもかんでもに使用できるわけではないので注意して下さい。[/info]

テスト中