人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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

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



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

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

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

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

●質問者: misithau
●カテゴリ:コンピュータ
✍キーワード:リスト 機械
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● andi
●57ポイント

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>

◎質問者からの返答

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


2 ● znz
●10ポイント

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>
関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ