Как использовать jQuery для сортировки тегов div на стороне клиента?

Question

Я хочу разрешить пользователю веб-приложения сортировать результаты запроса без обращения к серверу.Я ищу обычный тип клика по заголовку для сортировки по столбцу.

Однако я не работаю с реальной таблицей.Я буду манипулировать тегами div на основе содержимого.Есть ли способ jQuery для облегчения этого?

Answer 1

См. вопрос о сортировке элементов li.С небольшими изменениями это также может быть применено в вашем случае.Среди прочего рекомендуется использовать плагин TinySort .

Answer 2

Этот урок проведет вас по пути, который вы ищете.Он ориентирован на сортировку табличных данных в HTML-таблицах, но вы можете легко переназначить примеры для работы с группой элементов div или элементов списка или чем-то еще.jQuery заручился поддержкой, так что это хорошее руководство.Например, он учит вас, как использовать встроенный в JavaScript метод sort().Хотите отсортировать по алфавиту?Вот модифицированный фрагмент этого руководства:

var parent_of_divs = $('#parent-of-divs'), rows;
rows = parent_of_divs.children('div').get();
rows.sort(function(a, b) {
    var keyA, keyB;
    keyA = $(a).text().toUpperCase();
    keyB = $(b).text().toUpperCase();
    if (keyA < keyB) return -1;
    if (keyA > keyB) return 1;
    return 0;
});
$.each(rows, function(index, row) {
    parent_of_divs.append(row);
});

Answer 3

Вот хороший пример:

* ** 1003 тысяча два * Пример

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

Answer 4

Возможно, вы захотите изучить использование jquery template lib.Вы можете создать шаблон, а затем передать объект данных в шаблон для визуализации.когда вы захотите изменить порядок сортировки, вы сможете изменить объект данных, а затем "обновить ()" свой шаблон.