Top > HP作成> 隠居の JavaScript :番号付きリストを降順にする。(追記)

2008年3月31日

隠居の JavaScript :番号付きリストを降順にする。(追記)

 W3Schools JavaScript Tutorial の Loop の項まで学習して、Customaize History 履歴ページでのリスト番号を降順にする方法に使っている Expert が書いた次の JavaScript が少し理解できるようになったので、私の理解できた範囲でコメント文に記した。
<!--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> 


 なお、 Customaize History 履歴ページの番号降順設定は、上の JavaScript でInternetExplorer(IE) では上手くいっていたが、Mojilla 系の Firefox Netscape では番号が倍になり、原因が突き止められないまま放ってあった。
 今回改めて "childNodes.length" でネットサーチしてみると答えがあった。thescript.com というサイトのフォーラムによると、どうやら Mojilla 系では、 whitespace (空白スペース)をカウントの対象に入れるらしいことが分かった。
 そこで、Customaize History 履歴ページ(MovableType のインデックス・テンプレートで作成している)の編集画面で編集しやすくするために入れていた </li>....<li> の間の空白スペースを削除すると、Mojilla 系でも IE と同じように、綺麗な降順番号を表示するようになった。<li>..</li> のタグ・セット間に必ず空白スペースが入っていたので、偶然数字が倍の偶数になっていたらしい。

 この世界、学習すべきことは五万とある。死ぬまで退屈することはないだろう。

トラックバックURL

このエントリーのトラックバックURL:
http://n-shuhei.net/cgi/mt/mt-tb.cgi/1445

コメント

こんばんは。はじめまして。
リスト降順を検索をして、こちらに来ました。
参考にさせてもらいました。
リストタグのことですが、
現在のFirefox 11.0の場合かもしれませんが、
<ol>
  <li>
  <li>
  <li>
</ol>
で数字ズレしない様です。
<li>タグの閉じタグを書かなければ、整列させても平気みたいです。

コメントする

(初めてのコメントの時は、コメントが表示されるためにこのブログのオーナーの承認が必要になることがあります。承認されるまでコメントは表示されませんのでしばらくお待ちください)
 MovableType または TypeKey のサインインができない方には、「匿名でコメントする」をクリックください。スパム・コメントを防止するためにコメント入力欄の下のCaptcha:画像で表示されている文字入力をお願いしています。
 できれば、MovableType または TypeKey の登録をしていただければ、Captcha:画像で表示されている文字入力の必要はありません。
MovableType のアカウントの取得は、下のサインインの文字をクリックするとでる画面で「サインイン画面のアカウントがないときはサインアップしてください。」のサインアップをクリックすれば登録画面が表示されます。「ウェブサイトURL」には、http://n-shuhei.net/atelier/ と入力ください。
 また、TypeKey は、 TypeKey サインインをクリックし新規登録ボタンから無料で取得できます。取得された TypeKey で他の多くのブログにコメントができます。)