順序付きリスト[Ordered List]の昇降を逆にする

jQuery2009年11月19日

表題のとおりですが、jQueryでそんな感じのことができます。ソースは以下の通りです。

• 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でオリジナルツールチップを使用する
• グローバルナビゲーションのカテゴリを自動でアクティブにする

この記事を読んでいる方にオススメの記事

• jQueryjQueryで画像のロールオーバーを実装
• jQueryjQueryでタブメニューを実装（画像メニュー版）
• jQueryニュースティッカーをjQueryで実装する／フルスクラッチ編
• jQueryグローバルナビゲーションのカテゴリを自動でアクティブにする
• jQueryニュースティッカーをjQueryで実装する／jquery.slider編
• jQueryはじめてのjQuery

「jQuery」の他の記事を読む

• ※承認制のため、即時には反映されません。