隠居の JavaScript ：番号付きリストを降順にする。（追記）
W3Schools JavaScript Tutorial の Loop の項まで学習して、Customaize History 履歴ページでのリスト番号を降順にする方法に使っている Expert が書いた次の JavaScript が少し理解できるようになったので、私の理解できた範囲でコメント文に記した。
なお、 Customaize History 履歴ページの番号降順設定は、上の JavaScript でInternetExplorer(IE) では上手くいっていたが、Mojilla 系の Firefox Netscape では番号が倍になり、原因が突き止められないまま放ってあった。
今回改めて "childNodes.length" でネットサーチしてみると答えがあった。thescript.com というサイトのフォーラムによると、どうやら Mojilla 系では、 whitespace （空白スペース）をカウントの対象に入れるらしいことが分かった。
そこで、Customaize History 履歴ページ(MovableType のインデックス・テンプレートで作成している）の編集画面で編集しやすくするために入れていた </li>....<li> の間の空白スペースを削除すると、Mojilla 系でも IE と同じように、綺麗な降順番号を表示するようになった。<li>..</li> のタグ・セット間に必ず空白スペースが入っていたので、偶然数字が倍の偶数になっていたらしい。
この世界、学習すべきことは五万とある。死ぬまで退屈することはないだろう。
<!--list descend-->
<script>
var o = document.getElementById("hoge");
//getElementById メソッドは指定ID（この場合："hoge"）のエレメント（この場合<ol>を指定する。
//"hoge"は、HTMLの<ol id="hoge"> というように指定している。
var max = o.childNodes.length;
//<ol id="hoge"> 要素内の子ノード（この場合、<li>..</li>）の数を変数 max に与える。参考：AllAbout JavaScript
for(var i = 0;i < max;i ++)
//隠居のお勉強：for loop の例
{
o.childNodes[i].value = max - i;
//子ノード<li>の i 番目に、(最大番号- i )を代入する。結果は、番号が降順になる。
}
</script>
<script>
var o = document.getElementById("hoge");
//getElementById メソッドは指定ID（この場合："hoge"）のエレメント（この場合<ol>を指定する。
//"hoge"は、HTMLの<ol id="hoge"> というように指定している。
var max = o.childNodes.length;
//<ol id="hoge"> 要素内の子ノード（この場合、<li>..</li>）の数を変数 max に与える。参考：AllAbout JavaScript
for(var i = 0;i < max;i ++)
//隠居のお勉強：for loop の例
{
o.childNodes[i].value = max - i;
//子ノード<li>の i 番目に、(最大番号- i )を代入する。結果は、番号が降順になる。
}
</script>
なお、 Customaize History 履歴ページの番号降順設定は、上の JavaScript でInternetExplorer(IE) では上手くいっていたが、Mojilla 系の Firefox Netscape では番号が倍になり、原因が突き止められないまま放ってあった。
今回改めて "childNodes.length" でネットサーチしてみると答えがあった。thescript.com というサイトのフォーラムによると、どうやら Mojilla 系では、 whitespace （空白スペース）をカウントの対象に入れるらしいことが分かった。
そこで、Customaize History 履歴ページ(MovableType のインデックス・テンプレートで作成している）の編集画面で編集しやすくするために入れていた </li>....<li> の間の空白スペースを削除すると、Mojilla 系でも IE と同じように、綺麗な降順番号を表示するようになった。<li>..</li> のタグ・セット間に必ず空白スペースが入っていたので、偶然数字が倍の偶数になっていたらしい。
この世界、学習すべきことは五万とある。死ぬまで退屈することはないだろう。
コメント
こんばんは。はじめまして。
リスト降順を検索をして、こちらに来ました。
参考にさせてもらいました。
リストタグのことですが、
現在のFirefox 11.0の場合かもしれませんが、
＜ol＞
＜li＞
＜li＞
＜li＞
＜/ol＞
で数字ズレしない様です。
＜li＞タグの閉じタグを書かなければ、整列させても平気みたいです。
Posted by 海牛 at 2012年4月11日 20:13
コメントする
(初めてのコメントの時は、コメントが表示されるためにこのブログのオーナーの承認が必要になることがあります。承認されるまでコメントは表示されませんのでしばらくお待ちください)