Как фильтровать/сортировать дивы (пример внутри)??

Тема в разделе "JavaScript", создана пользователем SuperGadgets, 17 апр 2018.

  1. SuperGadgets

    SuperGadgets Создатель

    Регистр.:
    26 дек 2016
    Сообщения:
    44
    Симпатии:
    4
    Всем привет
    Делаю сайт витрину, на очень простой ЦМС на файлах без базы данных. Может кто подскажет скрипт который по клику по кнопке (цена по возростанию/убыванию) будет сортировать ДИВы по цене. Цена прописана в спане tags
    <span class="tags">
    <a class="label label-rounded label-secondary p-category" href="/tag:8#body-wrapper">8</a>
    </span>

    Вот кусок с дивами:
    HTML:
    <div class="columns">
        <div id="item" class="column col-9 col-md-12 extra-spacing">
           
                    <div class="bricklayer">
                                        <div class="card">
                <div class="card-header">
            <div class="card-subtitle text-gray">
                <span class="blog-date">
        <time class="dt-published" datetime="2018-04-17T19:11:16+03:00">
            <i class="fa fa-calendar"></i> 17th Apr 2018
        </time>
    </span>
        </div>
            <div class="card-title">
                <h5 class="p-name mt-1"><a href="/blog/product" class="u-url">product 8</a></h5>
            </div>
        </div>
        <div class="card-body">
                        <p><a href="/inj.html">plugin:content-inject</a>
    <a href="/inj.html">plugin:page-inject</a></p>
                </div>
        <div class="card-footer">
            <span class="tags">
            <a class="label label-rounded label-secondary p-category" href="/tag:8#body-wrapper">8</a>
        </span>
        </div>
    </div>
    
                                        <div class="card">
                <div class="card-header">
            <div class="card-subtitle text-gray">
                <span class="blog-date">
        <time class="dt-published" datetime="2018-04-17T17:00:08+03:00">
            <i class="fa fa-calendar"></i> 17th Apr 2018
        </time>
    </span>
        </div>
            <div class="card-title">
                <h5 class="p-name mt-1"><a href="/blog/product-1" class="u-url">Product 5</a></h5>
            </div>
        </div>
        <div class="card-body">
                       
                </div>
        <div class="card-footer">
            <span class="tags">
            <a class="label label-rounded label-secondary p-category" href="/tag:5#body-wrapper">5</a>
        </span>
        </div>
    </div>
    
                                        <div class="card">
                <div class="card-header">
            <div class="card-subtitle text-gray">
                <span class="blog-date">
        <time class="dt-published" datetime="2018-04-17T17:08:12+03:00">
            <i class="fa fa-calendar"></i> 17th Apr 2018
        </time>
    </span>
        </div>
            <div class="card-title">
                <h5 class="p-name mt-1"><a href="/blog/product-4" class="u-url">product 4</a></h5>
            </div>
        </div>
        <div class="card-body">
                       
                </div>
        <div class="card-footer">
            <span class="tags">
            <a class="label label-rounded label-secondary p-category" href="/tag:4#body-wrapper">4</a>
        </span>
        </div>
    </div>
    
                                        <div class="card">
                <div class="card-header">
            <div class="card-subtitle text-gray">
                <span class="blog-date">
        <time class="dt-published" datetime="2018-04-17T17:01:12+03:00">
            <i class="fa fa-calendar"></i> 17th Apr 2018
        </time>
    </span>
        </div>
            <div class="card-title">
                <h5 class="p-name mt-1"><a href="/blog/product1" class="u-url">product1</a></h5>
            </div>
        </div>
        <div class="card-body">
                       
                </div>
        <div class="card-footer">
            <span class="tags">
            <a class="label label-rounded label-secondary p-category" href="/tag:1#body-wrapper">1</a>
        </span>
        </div>
    </div>
    
                                        <div class="card">
                <div class="card-header">
            <div class="card-subtitle text-gray">
                <span class="blog-date">
        <time class="dt-published" datetime="2018-04-17T17:05:58+03:00">
            <i class="fa fa-calendar"></i> 17th Apr 2018
        </time>
    </span>
        </div>
            <div class="card-title">
                <h5 class="p-name mt-1"><a href="/blog/produkt-2" class="u-url">produkt 2</a></h5>
            </div>
        </div>
        <div class="card-body">
                       
                </div>
        <div class="card-footer">
            <span class="tags">
            <a class="label label-rounded label-secondary p-category" href="/tag:2#body-wrapper">2</a>
        </span>
        </div>
    </div>
    
                                    </div>
    
                   
                    </div>
     
  2. Absolute

    Absolute Крокодил ;)

    Регистр.:
    9 авг 2009
    Сообщения:
    483
    Симпатии:
    323
    На jQuery примерно так:
    HTML:
    $(document).ready(function(){
    var el = $('.card');
      var sortButton = $('<a />', {
        text : 'По позрастанию/убыванию',
        href : '#',
        click : function(){
          var $t = $(this);
          if($t.data('c') === undefined || $t.data('c') === false){
            $t.data('c', true);
          } else {
            $t.data('c', false);
          }
         el.sort(function(a,b){
           var ap = parseFloat($(a).find('.tags a').text()),
               bp = parseFloat($(b).find('.tags a').text()),
               c = $t.data('c') ? 1 : -1;
           if(ap < bp){
             return -c;
           }
           if(ap > bp){
             return c;
           }
           return 0;
         });
         el.parent().append(el);     
        }
      });
    el.parent().prepend(sortButton);
    });
     
  3. Polynom

    Polynom Писатель

    Регистр.:
    4 окт 2016
    Сообщения:
    6
    Симпатии:
    0
    jQuery UI поможет визуально сортировать div