Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 17.04.2018, 23:02
Интересующийся
Отправить личное сообщение для Alexko64 Посмотреть профиль Найти все сообщения от Alexko64
 
Регистрация: 17.04.2018
Сообщений: 26

Как фильтровать/сортировать дивы (пример внутри)??
Всем привет
Делаю сайт витрину, на очень простой ЦМС на файлах без базы данных. Может кто подскажет скрипт который по клику по кнопке (цена по возростанию/убыванию) будет сортировать ДИВы по цене. Цена прописана в спане 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>
Ответить с цитированием
  #2 (permalink)  
Старый 17.04.2018, 23:20
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как создать новый массив из массива внутри объекта? Enkille Общие вопросы Javascript 14 14.07.2016 18:26
как правильно обращаться к свойствам объект внутри самого объекта ? mitiya Общие вопросы Javascript 12 25.04.2015 21:18
как закрыть ShadowBox окно из HTML-кода внутри него Роман Б. Events/DOM/Window 1 16.04.2015 19:52
Div внутри Div. Как сделать hover только для самого верхнего? Siend Общие вопросы Javascript 2 19.03.2015 22:16
[jQuery] [Обработка клика] Как не потерять текущий контекст внутри обработчика? xintrea Events/DOM/Window 1 10.02.2011 16:34