【jquery/javascript】クロスブラウザ対応にするolの逆順表示

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です。

Related articles