Как сделать сортировку блоков div по тексту внутри?

Question

[avtor_house]

Всем привет, есть такая структура вывода данных из php

<?php foreach ($accounts as $account): ?>
                <div id="<?= $account['activation'];  ?>" class="item">
                    <a href="<?= $account['idn'] . $account['href'] ?>">
                        <img src="<?= $account['img'] ?>" alt="Купить <?= $account['name'] ?>" title="Купить <?= $account['name'] ?>">
                        <div class="item_overlay">
                            <div class="item_title">
                                <span class="<?= mb_strtolower($account['activation']);  ?>"></span>
                                <span class="searchable"><?= $account['name'] ?></span>
                            </div>
                        </div>
                        <div class="item_price">от <span><?= $account['min_price'] ?></span> ₽</div>
                    </a>
                </div>
            <?php endforeach ?>

Как сделать, чтобы при нажатии на кнопку или ссылку(неважно), происходила сортировка по названию или по цене. И кнопка работала и по возрастанию и по убыванию. Сайт кстати написан на Angular, и если можно сделать сортировку с помощью ангуляра, напишите пожалуйста как, а то я в нем не разбираюсь. Спасибо!

Answer 1

[Moses Fender]

В JavaScript есть в прототипе массива традиционная для всех функция sort().
Для примера сделаем такую табличку:

<a href="javascript:" data-sort="alphabet">sort by alpabet</a>
<a href="javascript:" data-sort="amount">sort by amount</a>

<div id="lst">
    <div><span>jsghgori</span><span>345</span></div>
    <div><span>ouerok</span><span>98</span></div>
    <div><span>qiewhfh</span><span>548</span></div>
    <div><span>nvxcmk</span><span>234</span></div>
    <div><span>kefoo</span><span>38</span></div>
</div>

Теперь напичкаем её функционалом для сортировки и рисования:

<script>
    var lst = document.getElementById('lst');
    Object.defineProperties(lst, {
        _direct: {
            /**
             *  Направление сортировки
             *  0 - a->z
             *  1 - z->a
             */
            value: 0,
            writable: true
        },

        direct: {
            get: function () {
                return this._direct;
            },
            set: function (val) {
                this._direct = Math.abs(this._direct - 1);
            },
            enumerable: true,
            configurable: true
        },
        _dataArr: {
            /* Массив с данными */
            value: [],
            writable: true,
        },
        data: {
            /* Получить массив с данными */
            get: function () {
                let _that = this;
                if (!this._dataArr.length) {
                    /* Если массив пуст, получим данные */
                    [].map.call(this.children, function (_row) {
                        let _dataRow = {
                            title: _row.children[0].innerHTML,
                            amount: parseInt(_row.children[1].innerHTML),
                            element: _row
                        }
                        _that._dataArr.push(_dataRow);
                    });
                }
                /* В любом случае возвертаем массив */
                return this._dataArr;
            }
        },
        sortByAlphabet: {
            value: function () {
                let _that = this;
                this.data.sort(function (a, b) {
                    if (_that.direct) {
                        return a.title > b.title ? 1 : -1;
                    } else {
                        return a.title > b.title ? -1 : 1;
                    }
                });

                this.direct = true;
                this.drawRows();
            },
            writable: false
        },
        sortByAmount: {
            value: function () {
                let _that = this;
                this.data.sort(function (a, b) {
                    if (_that.direct) {
                        return a.amount > b.amount ? 1 : -1;
                    } else {
                        return a.amount > b.amount ? -1 : 1;
                    }
                });
                this.direct = true;
                this.drawRows();
            },
            writable: false
        },
        drawRows: {
            value: function () {
                for (let i = 0; i < this.data.length; i++) {
                    this.appendChild(this.removeChild(this.data[i].element));
                }
            },
            writable: false
        }
    });
    document.addEventListener('click', function (ev) {
        if (ev.target.hasAttribute('data-sort')) {
            switch (ev.target.getAttribute('data-sort')) {
                case 'alphabet':
                    lst.sortByAlphabet();
                    break;
                case 'amount':
                    lst.sortByAmount();
                    break;
            }
        }
    });
</script>

Весь цимес в lst.sortByAlphabet() и lst.sortByAmount(). То есть, sort() внутри себя перебирает все элементы массива со своим соседом, передавая их в аргументах, чем мы и пользуемся для сравнения их. Что сравнивать, решаем сами.

Comments

[avtor_house]

Поставил заместо var lst = document.getElementById('lst'); var lst = document.getElementById('item');
Вот мой код, сортировка не происходит, хотя и ставил уже item_title и item_price, не разобрался в структуре скрипта, я слаб в JS

<div id="<?= $account['activation'];  ?>" class="item">
                    <a href="<?= $account['idn'] . $account['href'] ?>">
                        <img src="<?= $account['img'] ?>" alt="Купить <?= $account['name'] ?>" title="Купить <?= $account['name'] ?>">
                        <div class="item_overlay">
                            <div id="item_title" class="item_title">
                                <span class="<?= mb_strtolower($account['activation']);  ?>"></span>
                                <span><?= $account['name'] ?></span>
                            </div>
                        </div>
                        <div id="item_price"  class="item_price">от <span><?= $account['min_price'] ?></span> ₽</div>
                    </a>
                </div>