Pull to refresh

Сортировка на jQuery весом в 1кб

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

Tags:
Hubs:
You can’t comment this publication because its author is not yet a full member of the community. You will be able to contact the author only after he or she has been invited by someone in the community. Until then, author’s username will be hidden by an alias.