Не так давно мне понадобилось отсортировать по возрастанию и убыванию примерно такой HTML:
Основная цель была в том, чтобы код был как можно более простым, компактным и написанным на jQuery. Кроме того, показалось логичным организовать его в виде плагина общего назначения. И вот, что из этого получилось:
Скрипт организован в виде маленького плагина jQuery, который после минимизации весит менее 1кб. Он получает путь к элементу, который надо отсортировать (item), путь к тексту, по которому происходит сортировка (sort_by). Кроме того, можно сортировать по возрастанию или убыванию (order), а также, числа или текст (is_num).
Работает плагин следующим образом: сначала в массив titles записываются пары значений [сортируемый текст, индекс], после чего каждому сортируемому элементу добавляется элемент rel, используемый для последующей идентификации этого элемента.
Затем используется стандартная функция JavaScript'а sort (и reverse для сортировки в убывающем порядке), которой передается функция, определяющая, как именно сравнивать каждые два значения массива.
Затем, в цикле, для каждого элемента массива titles, применяется append для каждого сортируемого элемента. Так как append в нашем случае перемещает каждый элемент в конец списка DIV'ов, то получаем отсортированный HTML.
<div id="demo">
<div>
<p class="title">Заголовок</p>
<p class="txt">Много текста</p>
</div>
<div>
<p class="title">Заголовок</p>
<p class="txt">Много текста</p>
</div>
...
</div>
Основная цель была в том, чтобы код был как можно более простым, компактным и написанным на jQuery. Кроме того, показалось логичным организовать его в виде плагина общего назначения. И вот, что из этого получилось:
(function($){
$.fn.jSort = function(options){
var options = $.extend({
sort_by: 'p',
item: 'div',
order: 'asc', //desc
is_num: false
},options);
return this.each(function() {
var hndl = this;
var titles = [];
var i = 0;
//init titles
$(this).find(options.item).each(function(){
var txt = $(this).find(options.sort_by).text().toLowerCase();
titles.push([txt, i]);
$(this).attr("rel", "sort" + i);
i++;
});
this.sortNum = function(a, b){
return eval(a[0] - b[0]);
};
this.sortABC = function(a, b){
return a[0] > b[0] ? 1 : -1;
};
if(options.is_num){
titles.sort(hndl.sortNum);
}
else{
titles.sort(hndl.sortABC);
}
if(options.order == "desc"){
if(options.is_num){
titles.reverse(hndl.sortNum);
}
else{
console.log(titles);
titles.reverse(hndl.sortABC);
}
}
for (var t=0; t < titles.length; t++){
var el = $(hndl).find(options.item + "[rel='sort" + titles[t][1] + "']");
$(hndl).append(el);
}
});
};
})(jQuery);
Скрипт организован в виде маленького плагина jQuery, который после минимизации весит менее 1кб. Он получает путь к элементу, который надо отсортировать (item), путь к тексту, по которому происходит сортировка (sort_by). Кроме того, можно сортировать по возрастанию или убыванию (order), а также, числа или текст (is_num).
Работает плагин следующим образом: сначала в массив titles записываются пары значений [сортируемый текст, индекс], после чего каждому сортируемому элементу добавляется элемент rel, используемый для последующей идентификации этого элемента.
Затем используется стандартная функция JavaScript'а sort (и reverse для сортировки в убывающем порядке), которой передается функция, определяющая, как именно сравнивать каждые два значения массива.
Затем, в цикле, для каждого элемента массива titles, применяется append для каждого сортируемого элемента. Так как append в нашем случае перемещает каждый элемент в конец списка DIV'ов, то получаем отсортированный HTML.