Не так давно мне понадобилось отсортировать по возрастанию и убыванию примерно такой 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.