HTML5でol要素でリストに振る番号を逆にするreversed属性が追加されました。IEは未対応なので、jqueryで対応させてます。
HTML
<ol reversed> <li>List Item 01</li> <li>List Item 02</li> <li>List Item 03</li> <li>List Item 04</li> <li>List Item 05</li> <li>List Item 06</li> <li>List Item 07</li> </ol> <ol reversed start="10"> <li>List Item 01</li> <li>List Item 02</li> <li>List Item 03</li> <li>List Item 04</li> <li>List Item 05</li> <li>List Item 06</li> <li>List Item 07</li> </ol>
start属性にも対応しています。
jquery
function reverse_list() { if($("ol").attr('reversed') !== undefined ){ var list_ary = "ol[reversed]"; $(list_ary).each(function() { var total_items = $(this).children().length; var start_num = $(this).attr('start'); var this_item; for(i=0; i < total_items; i++) { this_item = $(this).children(); if (start_num !== "" && start_num !== undefined) { this_item.eq(i).attr('value', start_num - i); } else { this_item.eq(i).attr('value', total_items - i); } } }); } } reverse_list();
関数にしていますが、関数内の記述をそのまま仕様しても動作します。
確認ブラウザはIE11、Edge、Firefox、Chrome、Safariです。