0

Есть такой код, кот сортирует DIVы в алфавитном порядке при клике на #sort.

Вопрос: как дописать код, чтобы DIVы при повторном клике на тот же #sort сортировались в обратном порядке?

html

<div id="menu">
     <div>
      <a href="#">
       <p class="menu-img"><img src="jam.gif" /></p>
       <p class="menu-txt">Ямайка<p>
      </a>
     </div>
     <div>
      <a href="#">
       <p class="menu-img"><img src="est.gif" /></p>
       <p class="menu-txt">Эстония<p>
      </a>
     </div>
     <div>
      <a href="#">
       <p class="menu-img"><img src="mal.gif" /></p>
       <p class="menu-txt">Мальдивы<p>
      </a>
     </div>
     <div id="sort"><a href="#">Сортировать по алфавиту</a></div>
    </div>

js

$("#sort").click(function () {
    var mylist = $('#menu');
    var listitems = mylist.children('div').get();
    listitems.sort(function(a, b) {
       var compA = $(a).text().toUpperCase();
       var compB = $(b).text().toUpperCase();
       return (compA < compB) ? -1 : (compA > compB) ? 1 : 0;
    })
    $.each(listitems, function(idx, itm) { mylist.append(itm); });
});

2 ответа 2

0

Можно сохранить текущий порядок сортировки в замыкании. Например так:

var isAscOrder = true;
$("#sort").click(function () {
    var mylist = $('#menu');
    var listitems = mylist.children('div').get();

    listitems.sort(function(a, b) {
        var compA = $(a).text().toUpperCase();
        var compB = $(b).text().toUpperCase();

        return (isAscOrder ? 1 : -1) * ((compA < compB) ? -1 : (compA > compB) ? 1 : 0);
    });

    isAscOrder = !isAscOrder;

    $.each(listitems, function(idx, itm) { mylist.append(itm); });
});
3
  • Не работает код. Не могу понять в чем причина
    – Юрий
    Commented 5 сент. 2015 в 18:05
  • @Юрий, а что в консоли браузера? Commented 5 сент. 2015 в 18:10
  • Спасибо огромное! Вы мне помогли.
    – Юрий
    Commented 5 сент. 2015 в 21:16
-1

Ну вот такой метод он не очень, я думаю он уже устарел. Лучший вариант, имхо, делать на стороне моделей. Ты грузишь от сервера некий json, из него делаешь obervable, а потом данные манипулируешь на стороне моделью с помощью linqjs

Вот несколько примеров

var array = [{a:"a"},{a:"z"},{a:"k"},{a:"l"},{a:"m"},{a:"c"}];     

Enumerable.From(array).OrderBy("$.a").Select("$.a")

var array = [1,51,61,75,8,35,43];

Enumerable.From(array).OrderByDescending()

Таким образом, твой HTML код будет очень простым. jquery почти не нужен будет.

Linqjs умеешь расширяться для observable. Один раз научишься, будет клепать клевые интерфейсы моментально. Плюс, когда кто то будет просматривать исходный код твоего сайта он увидит лишь основную разметку.

Сортировать div-ы, то есть менять разметку на лету, по моему трудозатратно.

knockoutjs - простой как пять копеек

angularjs - Супер-героический фреймворк

linqjs - манипуляции с данными.

Удачи!

4
  • Тащить в проект пачку сторонних зависимостей для решения элементарной задачи как-то избыточно Commented 4 сент. 2015 в 22:44
  • Я имел ввиду, вообще менять основу разработки. Вы знаете, я люблю jqury, но когда делают так function calc2($from, $to) { $to.val(Math.round($from.val() * $from.attr('data-rate') / $to.attr('data-rate') * 10000) / 10000); } а потом в результате получается NaN.
    – sbaet
    Commented 4 сент. 2015 в 22:46
  • Задачи бывают разные. Для каких-то использование фреймворков и библиотек оправдано, для каких-то нет. Иногда, даже jQuery избыточен. А в данном случае, есть конкретная проблема с конкретным кодом. Предлагать все переписать с использованием супер библиотеки X -- не самой лучший вариант. Commented 4 сент. 2015 в 22:55
  • Совершенно согласен. Оттолкнулся от темы, виноват. Здесь недавно, поэтому не привык этому )
    – sbaet
    Commented 4 сент. 2015 в 22:57

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.