掲示板/総合質問板/過去ログ/一覧/ リストの数値を逆順にする

0 名前： Coeurl ： 2007/10/25（木） 21:48 ID:.Pfrv2yL sub-Q5

ol要素、あるいはul要素で list-style: decimal が指定されているものとして、li要素に関して、

<ul id="list_id">
    <li>内容1</li>
    <li>内容2</li>
    <li>内容3</li>
    <li>内容4</li>
    <li>内容5</li>
</ul>

というHTMLに対して、

5. 内容1
4. 内容2
3. 内容3
2. 内容4
1. 内容5

のように、逆順に番号が出力されることを期待しているとき、どのようにコーディングすることが考えられるのでしょうか？

いわゆるPCから閲覧されることを想定するとき、contentプロパティ、counter-incrementプロパティの対応状況も考慮するとどのような手段が妥当なのかと思い、ご意見頂きたく質問致しました。

なお、自身ではJavaScriptに関する知識が疎いものの以下のような操作を考えました。

var list = document.getElementById("list_id");
list.style.listStyle = "decimal";
var len = list.childNodes.length;
var ary = new Array(len);
var max = 0;
for(var i=0; i<len; ++i){
    if(typeof list.childNodes[i].value == 'undefined'){
        ary[i] = false;
    } else{
        ary[i] = true;
        ++max;
    }
}
var num = 0;
for(var i=0; i<len; ++i){
    if(ary[i]) list.childNodes[i].value = max - num++;
}

これを利用するのは、あるページでの「最新記事」のリストを、上を最新として表示するため番号を降順に振りたいといった場合です。
上記では、番号が昇順になってしまうと番号の意味合いが不明確になってしまうため、ul要素としてJavaScript内でlist-styleを指定することを考えました。

これについてご意見、参考となる文献などを教示いただけると幸いです。

1 名前：匿名： 2007/10/25（木） 21:48 ID:7daztWPT sub-Cz

少し考えてみましたが、結局 >>0 の方法がベターな気がします。スクリプトを多少修正。

// For HTML 4.01 Transitional (because of the deprecated "value" in HTMLLIElement)

var UL = document.getElementById ('list_id');
var n = UL.lastChild;
var i = 1;
UL.style.listStyle = 'decimal';
for (; n; n = n.previousSibling) if (n.nodeName == 'LI') n.value = i++;

# 確かに CSS3 にも XSLT1 にも、降順の番号付けってないな……。

2 名前： Coeurl ： 2007/10/25（木） 21:48 ID:2bhwZ3ol sub-C7: JSについてスマートな形を教示頂きありがとうございます。
参考にさせていただきます。

ご意見頂きありがとうございます。