Javascript-форум (https://javascript.ru/forum/)
-   Javascript под браузер (https://javascript.ru/forum/css-html/)
-   -   Как фильтровать/сортировать дивы (пример внутри)?? (https://javascript.ru/forum/css-html/73466-kak-filtrovat-sortirovat-divy-primer-vnutri.html)

Alexko64 17.04.2018 23:02

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

Вот кусок с дивами:
<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>

рони 17.04.2018 23:20

Alexko64,
Сортировка блоков по содержимому и группировка по три


Часовой пояс GMT +3, время: 16:21.