Sorting html elements that were ordered by roman numeral IDs

Question

Sorting html elements that were ordered by roman numeral IDs

1k Views Asked by Jeele Yah At 12 April 2025 at 16:07

I have generated HTML (i have no control of this) similar to this:

<ul id="list">
  <li id="I">one</li>
  <li id="II">two</li>
  <li id="III">three</li>
  <li id="IV">four</li>
  <li id="IX">nine</li>
  <li id="V">five</li>
  <li id="VI">six</li>
  <li id="VII">seven</li>
   .....
   ......
   ......
</ul>

Basically, the code (SQL -> XML -> XSLT) that generated this is sorting by a field (which represents a roman numeral field) alphabetically. Is there a way i can use javascript to reorder the list items from the clientside?

Original Q&A

There are 3 best solutions below

RobG On 13 October 2011 at 23:22

As far as I am aware, XSLT will only sort on a value that you can specify as text or number (...data-type="text|number"...). You might be able to add another attribute that is the number value of the roman numeral id (e.g. ...id="II" data-decimal="2"...), then sort on that with data-type number.

Abdennour TOUMI On 16 September 2013 at 14:45

Use sortContent JQuery plugin , it is very powreful plugin for sorting :

after extending Number object by fromRomaon and toRoman functions, Use the plugin as following :

$('#list').sortContent({asc:true,helperxp:myHelper})

Note: helperxp option has getter & setter, you should implement getter to get the value of attr ID , and setter to set the new value of attr ID since you sort according that attr.

var myHelper={
   get:function(e){
    return Number.fromRoman(e.attr('id'))+'';
   },
   set:function(e,newVal){
       $(e).attr('id',(parseInt(newVal)).toRoman());
   }

}

DEMO:

http://jsfiddle.net/abdennour/6RtVc/4/

**kennebec** · Accepted Answer

<!doctype html>
<html lang="en">
<head>
<meta charset= "utf-8">
<title>Small Page</title>
<script>
function sortRomanIds(){
    fromRoman= function(s){
        s= s.toUpperCase();
        var L= s.length, sum= 0, i= 0, L= s.length, next, val,
        R={
            M: 1000, D: 500, C: 100, L: 50, X: 10, V: 5, I: 1
        };
        while(i< L){
            val= s.charAt(i++);
            if(!R[val]) return NaN;
            val= R[val];
            next= R[(s.charAt(i) || 'N')] || 0;
            if(next> val) val*= -1;
            sum+= val;
        }
        return sum
    }
    var U= document.getElementById('list'), Li= U.childNodes, 
    L= Li.length, A= [];
    for(var i= 0; i<L; i++){
        if(Li[i].id) A.push(Li[i]);
    }
    A.sort(function(a, b){
        return fromRoman(a.id)- fromRoman(b.id)
    });
    while(A.length) U.appendChild(A.shift());
    return U;
}
window.onload=function(){
document.getElementById('list').onclick=sortRomanIds;
}
</script>
</head>
<body>
<h1> Small Page</h1>
<ul id="list">
  <li id="I">one</li>
  <li id="II">two</li>
  <li id="III">three</li>
  <li id="IV">four</li>
  <li id="IX">nine</li>
  <li id="V">five</li>
  <li id="VI">six</li>
  <li id="VII">seven</li>
</ul> 
</body>
</html>

Sorting html elements that were ordered by roman numeral IDs

There are 3 best solutions below

Related Questions in JAVASCRIPT

Related Questions in HTML

Related Questions in ROMAN-NUMERALS

Trending Questions

Popular # Hahtags

Popular Questions