не оптимизировал, чтобы был понятен смысл того, что происходит.
| Код |
<!DOCTYPE html>
<html>
<head>
<title>sort</title>
</head>
<body>
<div id="result" align="center" style="margin-top: 35px;">
<div class="cellsBlock" style="margin-top: -15px;">
<div class="cellLeft">
1
</div>
<div class="cellMiddle">
1
</div>
<div class="cellRight">
1
</div>
</div>
<div class="cellsBlock" style="margin-top: -15px;">
<div class="cellLeft">
3
</div>
<div class="cellMiddle">
3
</div>
<div class="cellRight">
3
</div>
</div>
<div class="cellsBlock" style="margin-top: -15px;">
<div class="cellLeft">
2
</div>
<div class="cellMiddle">
2
</div>
<div class="cellRight">
2
</div>
</div>
</div>
<script type="text/javascript">
/* trim - удаляет лишние пробелы, нужна для корректного сравнения строк */
(function(trim){
var o = {
trim:new RegExp("^" + trim + "|" + trim + "$", "g"),
trimLeft:new RegExp("^" + trim),
trimRight:new RegExp(trim + "$")
}, k;
for(k in o)
if(!String.prototype[k])
String.prototype[k] = (function(trim){
return function(){
return this.replace(trim, "");
};
})(o[k]);
delete o;
delete k;
})("[\\x09\\x0A-\\x0D\\x20\\xA0\\u1680\\u180E\\u2000-\\u200A\\u2028\\u2029\\u202F\\u205F\\u3000]+");
var el = document.getElementById( 'result' );
/* берем контейнер сортировки, его дети - то что сортируем */
var els = el.childNodes;
var a = [];
/* набираем массив объектов для сортировки */
for( var i = 0; i < els.length; i++ )
{
var el_line = els[ i ];
if( el_line.nodeType != 3 )
{
var s = '';
for( var j = 0; j < el_line.childNodes.length; j++ )
if( el_line.childNodes[ j ].className == 'cellRight' )
{
s = el_line.childNodes[ j ].innerHTML.trim();
break;
}
if( s != '' )
a[ a.length ] = { 'sort_str': s, 'obj': el_line }
}
}
/* сортируем */
var flag = true;
while( flag )
{
flag = false;
for( var i = 0; i < a.length - 1; i++ )
if( a[ i ].sort_str > a[ i + 1 ].sort_str )
{
c = a[ i ];
a[ i ] = a[ i + 1 ];
a[ i + 1 ] = c;
flag = true;
}
}
/* набираем HTML строку для замены */
sout = '';
for( var i = 0; i < a.length; i++ )
{
sout += '<div class="cellsBlock" style="margin-top: -15px;">';
sout += a[ i ].obj.innerHTML;
sout += '</div>';
}
el.innerHTML = sout;
</script>
</body>
</html>
|
|