順序付きリスト[Ordered List]の昇降を逆にする
jQuery2009年11月19日
表題のとおりですが、jQueryでそんな感じのことができます。ソースは以下の通りです。
HTML
<ol class="reversed"> <li>リスト5</li> <li>リスト4</li> <li>リスト3</li> <li>リスト2</li> <li>リスト1</li> </ol>
JS
$(document).ready(function(){ $('.reversed').each(function(){ var $children = $(this).children('li'); var totalChildren = $children.length; var start = 0; $children.each(function(){ $(this).val(totalChildren - start); start++; }); }); });
実はあまり知られてないですが、スクリプトを使わずとも、下記のようなHTMLにすることでolのリスト順を逆にすることができます。
HTML
<ol> <li value="5">リスト5</li> <li value="4">リスト4</li> <li value="3">リスト3</li> <li value="2">リスト2</li> <li value="1">リスト1</li> </ol>
あまり活用できる場面は少ないとは思いますが、まあネタの一つとして。
この記事を読んでいる方にオススメの記事
- jQuery今更聞けない!jQueryではじめるJavascript超初心者講座
- jQueryニュースティッカーをjQueryで実装する/jquery.slider編
- jQueryナビゲーションのカテゴリを自動でアクティブにする(テキスト版)
- jQueryjQueryで外部ファイル(XMLデータ)を解析し、HTMLに表示する
- jQueryjQueryで画像のロールオーバーを実装
- jQueryjQueryでブロックレベルの高さを揃える
- ※承認制のため、即時には反映されません。
この記事にコメントする