mrs.suzu841.com

管理人のミニメモ

リストスタイルの番号を逆順（降順）にする

<ol><li> で番号を逆順（降順）にするには " value " 属性を使う方法と " jquery " があるようだ。 " value " 属性を使う場合は以下のような書式となる。

<ol>
　<li value="05"> </li>
　<li value="04"> </li>
　<li value="03"> </li>
　<li value="02"> </li>
　<li value="01"> </li>
</ol>

" jquery " を使う場合には、jquery.com の Downloading_jQuery から "jquery.min.js " をダウンロードし、html の <head> ～ </head> に以下のように記述しておく。 2012.05.03 現在の最新バージョンは jquery-1.7.2.min.js 。

<head>
<script type="text/javascript" src="jquery.min.js"></script>
（上記の jquery.min.js の場所は自分の環境にあわせて適時変更。）
<script type="text/javascript">
$(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++;
});
});
});
</script>
</head>

<body>
<ol class="reversed">
　<li></li>
　<li></li>
　<li></li>
</ol>
</body>

サンプルとして四方山 tips のインデックスページのソースコードを見てほしい。