Question

我已经生成了HTML（我无法控制），类似于：

<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>

基本上，生成此代码的代码（SQL - ＆gt; XML - ＆gt; XSLT）按字母顺序按字段（表示罗马数字字段）排序。有没有办法可以使用javascript从客户端重新排序列表项？

Answer 1

<!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>

Answer 2

据我所知，XSLT只会对您可以指定为文本或数字的值进行排序（... data-type =“text | number”...）。您可以添加另一个属性，即罗马数字id的数字值（例如... id =“II”data-decimal =“2”...），然后使用数据类型编号对其进行排序。

Answer 3

使用sortContent JQuery插件，它是非常强大的排序插件：

通过fromRomaon和toRoman函数扩展Number对象后，使用以下插件：

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

注意：helperxp选项有getter＆amp; setter，您应该实现getter以获取attr ID的值，并设置setter以设置attr ID的新值，因为您根据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/

对按罗马数字ID排序的html元素进行排序

3 个答案: