Сортировка html-элементов, упорядоченных по идентификаторам римских цифр - PullRequest
Новая
       14

Сортировка html-элементов, упорядоченных по идентификаторам римских цифр

2 голосов
/ 14 октября 2011

Я сгенерировал 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 -> XML -> XSLT) , сгенерировавший это, сортируется по полю (которое представляет поле римской цифры) по алфавиту. Есть ли способ, которым я могу использовать javascript, чтобы изменить порядок элементов списка на стороне клиента?

Ответы [ 3 ]

4 голосов
/ 14 октября 2011 
<!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>
0 голосов
/ 16 сентября 2013

Используйте плагин sortContent JQuery, это очень мощный плагин для сортировки:

после расширения объекта Number функциями fromRomaon и toRoman. Используйте плагин следующим образом: 

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

Примечание: опция helperxp имеет getter & 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/

0 голосов
/ 14 октября 2011

Насколько мне известно, XSLT будет сортировать только по значению, которое вы можете указать как текст или число (... data-type = "text | number" ...).Вы можете добавить еще один атрибут, который является числовым значением идентификатора римской цифры (например, ... id = "II" data-decimal = "2" ...), а затем отсортировать его по номеру типа данных.

...