概要
全ての ol 要素の子要素となる li 要素の class 属性値に orderN を追加します。N は 1 から始まる整数です。
説明
このスクリプトを使用するとページの読み込みが完了した時点で、
<ol> <li>text</li> <li>text</li> <li>text <ol> <li>text</li> <li>text</li> <li>text</li> <li>text</li> </ol> </li> <li>text</li> </ol>
のようなソースは
<ol> <li class="order1">text</li> <li class="order2">text</li> <li class="order3">text <ol> <li class="order1">text</li> <li class="order2">text</li> <li class="order3">text</li> <li class="order4">text</li> </ol> </li> <li class="order4">text</li> </ol>
といった具合に自動で連番の class 属性値が追加されます。あらかじめ、CSS ファイルで order1 から orderN までのスタイルを書いておけばそれが反映されます。また ol ol .order1 から ol ol .orderN のように入れ子になったケースのスタイルを書いておけば、それも反映されます。
ソースコード
/* Author : http://www.yomotsu.net created: 2006/12/23 Licensed under the GNU Lesser General Public License version 2.1 olの子(li)に連番クラスをつける */ /* ordered classes for list item ----------------------------------------*/ function yomotsuOrderedClass() { for (var i = 0; i <document.getElementsByTagName("ol").length; i++) { var listnum = 1; for (var j = 0; j <document.getElementsByTagName("ol")[i].childNodes.length; j++) { if(document.getElementsByTagName("ol")[i].childNodes[j].nodeName == "LI"){ document.getElementsByTagName("ol")[i].childNodes[j].className += " order"+listnum; listnum ++; } } } } addEvent(window, 'load', yomotsuOrderedClass); /* add event ----------------------------------------*/ function addEvent(obj, evType, fn){ if (obj.addEventListener){ obj.addEventListener(evType, fn, false); return true; } else if (obj.attachEvent){ var r = obj.attachEvent("on"+evType, fn); return r; } else { return false; } }
トラックバックURI
http://www.yomotsu.net/lab/javascripts/orderedclass/trackback
この記事へのコメントはまだありません
コメントフォーム
実験室に戻る