VPF::сортировка списка - Форум программистов

kizune

Дата 23.10.2007, 16:03 (ссылка)

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

Загрузка ...

Опытный

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

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

Здравствуйте,все.
проблема такая:есть список

Код


<a href="#sort">sort</a>
<ul>    
    <li>ccc</li>
    <li>bbbb</li>
    <li>ddd</li>
    <li>aaaa</li>
</ul>

при клике на ссылку должна осуществляться сортировка списка по алфавиту.
можно ли как-то воспользоваться этим методом?

Код


function cmp(a, b) 
        {
          if (a > b)
          {
            return 1;
           }
          if (a < b)
           { return -1;
           }
          return 0;  
        }

если да,то как загнать в массив значения li?
а если нет,каким способом посоветуете воспользоваться?
заранее спасибо. smile

dsCode

Дата 23.10.2007, 16:34 (ссылка)

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

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 565
Регистрация: 8.9.2007
Где: Saint-Petersburg

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

kizune,

Цитата(kizune @ 23.10.2007, 16:03

)

можно ли как-то воспользоваться этим методом?

можно, почему нельзя? Так Вам же надо будет потом проапдейтить и html (т.е. отобразить элементы списка "по-новому"). Можно попробовать так:

- собрать все элементы в объект
- воспользоваться стандартной для объектов функцией sort(...), параметром которой передать Вашу функцию cmp(...) (т.е. критерий соритировки для sort(...))
- обновить html на основе отсортированного объекта (либо обновить innerHTML у <li>, либо уничтожить старые <li> и создать новые)

--------------------

the .code inside
:my music

GIK

Дата 23.10.2007, 16:49 (ссылка)

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

Загрузка ...

Добрый человек

Профиль
Группа: Участник
Сообщений: 985
Регистрация: 3.6.2005
Где: я только не небыв ал

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

Помню писал сам на С++, там все просто было, просто сравнивал символ и использовал два массива, время будет попробую сделать на JS smile

--------------------

Математика=>пиво=> програмирование, три вещи последовательны и совместимы !!!
Программирование - это не деятельнось! Программирование - это состояние души!
Бог - самый крутой программист.

kizune

Дата 23.10.2007, 17:02 (ссылка)

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

Загрузка ...

Опытный

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

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

не получается,может я какой момент упускаю?

Код


<script language="javascript" type="text/javascript">
function sorting()
{
var array = document.getElementById('Sort').innerHTML;

        function cmp(a, b) 
        {
          if (a > b)
          {
            return 1;
          }
          if (a < b)
          { 
              return -1;
          }
          return 0;  
        }
 document.getElementById('Sort').innerHTML = array.sort(cmp);       
}
</script>
<a href="#sort" onclick="sorting()">sort</a>
<ul id="Sort">    
    <li>ccc</li>
    <li>bbbb</li>
    <li>ddd</li>
    <li>aaaa</li>
</ul>

Это сообщение отредактировал(а) kizune - 23.10.2007, 17:02

SelenIT

Дата 23.10.2007, 17:35 (ссылка)

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

Загрузка ...

баг форума

Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

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

Цитата(kizune @ 23.10.2007, 16:03

)

можно ли как-то воспользоваться этим методом?

Для алфавитной сортировки не нужно - она по умолчанию.

Цитата(kizune @ 23.10.2007, 17:02

)

может я какой момент упускаю?

Упускаете: innerHTML - не массив, поэтому не имеет метода sort().

Предлагаю вариант средствами DOM (проход циклом по элементам <li> внутри списка, создание массива текстов и словаря текст-элемент, сортировка массива текстов и перестройка порядка элементов по отсортированному массиву с помощью словаря):

Код


<a href="#sort" onclick="listSort(document.getElementsByTagName('ul')[0])">sort</a>
<ul>    
    <li>ccc</li>
    <li>bbbb</li>
    <li>ddd</li>
    <li>aaaa</li>
</ul>
<script>
function listSort(list) {
   var items = list.getElementsByTagName('li'), tmp = [], index = {};
   for (var i=0; items[i]; i++) {
      tmp[i] = items[i].firstChild.nodeValue;
      index[tmp[i]] = items[i];
   }
   tmp.sort();
   for (var i=0; tmp[i]; i++) list.appendChild(index[tmp[i]]);
}
</script>

Конечно, это решение не идеально (в частности, никак не оптимизировано кол-во перестановок элементов), но для небольшого списка, имхо, вполне сгодится...

--------------------

Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!

Castro

Дата 26.10.2007, 16:08 (ссылка)

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

Загрузка ...

Опытный

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

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

Хорошее решение

--------------------

kizune

Дата 29.10.2007, 10:17 (ссылка)

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

Загрузка ...

Опытный

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

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

спасибо большое. smile

а как быть если список большой,элементов этак на двадцать?

Это сообщение отредактировал(а) kizune - 29.10.2007, 11:34

SelenIT

Дата 29.10.2007, 12:57 (ссылка)

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

Загрузка ...

баг форума

Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

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

kizune, с двадцатью, имхо, проблем и так не будет. Проверил на списке в 94 строки - на пятилетней машине (Duron-1200) сортирует за <20 мс в IE и Опере, за 60-70 - в FF. Вот уже для нескольких сотен надо всерьез думать об оптимизации...

--------------------

Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!

kizune

Дата 29.10.2007, 13:18 (ссылка)

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

Загрузка ...

Опытный

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

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

ясно,благодарю.последний вопрос если список будет таким

Код


<ul>
<li><a href="#">ccc</a></li>
    <li><a href="#">bbbb</a></li>
    <li><a href="#">ddd</a></li>
    <li><a href="#">aaaa</a></li>
<ul>

т.е если добавить в него ссылки,надосделать еще один цикл,который будет проходить сначала по <li>,а потом по <a>?

SelenIT

Дата 29.10.2007, 13:35 (ссылка)

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

Загрузка ...

баг форума

Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

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

kizune, нет, цикл останется тот же. Надо будет только изменить строку

Код


      tmp[i] = items[i].firstChild.nodeValue;

т.к. сейчас она ищет текст (текстовую ноду) непосредственно в самом <li>. Наверное, лучше и универсальнее всего будет заменить эту строку на

Код


      tmp[i] = items[i].innerText||items[i].textContent; // первое - для IE, второе - для прочих

чтобы сортировка шла по текстовому содержимому <li> вне зависимости от тегов внутри него...

--------------------

Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!

kizune

Дата 29.10.2007, 13:42 (ссылка)

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

Загрузка ...

Опытный

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

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

спасибо,спасибо,спасибо smile

SelenIT

Дата 29.10.2007, 13:47 (ссылка)

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

Загрузка ...

баг форума

Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

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

Всегда пожалуйста smile

--------------------

Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!

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