番号リストで番号を逆順にする方法は?


<ol>
<li>あああ</li>
<li>えええ</li>
<li>うううう </li>
</ol>



1 あああ
2 えええ
3 うううう

と表示されます。これを、

3 あああ
2 えええ
1 うううう

と機械的に逆順にする方法をお教えください。

回答の条件
  • 1人2回まで
  • 登録:2006/03/27 12:01:16
  • 終了:2006/04/03 12:05:03

回答(2件)

id:andi No.1

andi回答回数448ベストアンサー獲得回数02006/03/27 17:25:39

ポイント57pt

Lists in HTML documents (ja)

HTML4.01の仕様書には<ol>を降順にする方法については記載されていませんでしたので自動的に降順にする方法は無いかもしれません。

ただし<li>にvalue属性を指定することでリストの番号を再設定する機能を利用することで逐次指定したい番号を指定すれば見た目上、ブラウザのレンダリングにより降順に番号を表示することは可能です。

  1. 3番目
  2. 2番目
  3. 1番目


面倒な場合はJavaScriptでvalueを設定するのもひとつの手段でしょう(当然JSをオフにすると元の番号になってしまいますが)。


<ol id="hoge">

<li>3番目</li>

<li>2番目</li>

<li>1番目</li>

</ol>

<script>

var o = document.getElementById("hoge");

var max = o.childNodes.length;

for(var i = 0;i < max;i ++){

o.childNodes[i].value = max - i;

}

</script>

id:misithau

JavaScriptではうまくいきません。やり方が悪いのでしょうか?

2006/04/03 09:50:52
id:znz No.2

znz回答回数193ベストアンサー獲得回数252006/03/31 00:39:03

ポイント10pt

http://msugai.fc2web.com/web/CSS/generate.html

http://www.y-adagio.com/public/standards/tr_css2/generate.ht...

CSSのカウンタを使えば出来そうですが、IE6は対応していないようです。

Firefox 1.5.0.1とOpera 8.53は対応していました。

こんな感じです。

<html>
<head>
<title>test</title>
<style type="text/css">
	ol.reverse { counter-reset: revcounter 4; }
	ol.reverse li { list-style-type: none; }
	ol.reverse li:before {
		content: counter(revcounter) " ";
		counter-increment: revcounter -1;
	}
</style>
</head>
<body>
<ol class="reverse">
	<li>あああ</li>
	<li>えええ</li>
	<li>うううう</li>
</ol>
</body>
</html>

コメントはまだありません

この質問への反応(ブックマークコメント)

トラックバック

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません