VPF::Сортировка данных в DIV - Форум программистов

Valior

Дата 21.9.2011, 22:53 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 38
Регистрация: 24.5.2006

Репутация: нет
Всего: нет

Код


<div id="result" align="center" style="margin-top: 35px;">
  <div class="cellsBlock" style="margin-top: -15px;">
   <div class="cellLeft">
некий текст
  </div>
  <div class="cellMiddle">
некий текст
  </div>
  <div class="cellRight">
некий текст
  </div>
</div>
....
  <div class="cellsBlock" style="margin-top: -15px;">
   <div class="cellLeft">
некий текст
  </div>
  <div class="cellMiddle">
некий текст
  </div>
  <div class="cellRight">
некий текст
  </div>
</div>

Как можно отсортировать все данные по cellRight ?

Это сообщение отредактировал(а) Valior - 21.9.2011, 22:56

magelan

Дата 30.9.2011, 14:06 (ссылка)

(нет голосов)

Загрузка ...

потерял xPath

Профиль
Группа: Участник
Сообщений: 393
Регистрация: 5.4.2010

Репутация: 2
Всего: 16

не оптимизировал, чтобы был понятен смысл того, что происходит.

Код


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

1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Общие вопросы \| Следующая тема »