Как отсортировать Div по атрибуту в Jquery

Question

Как отсортировать Div по атрибуту в Jquery

0

У меня есть структура DIV, как это, и я хотел бы сортировать, используя следующую опцию.

Какие новости
Рекомендуемые
цена вниз
цены вверх

Структура DIV

<div class="product-result-panel product-list">
    <div class="show-all-products">
        <div class="ProductList product filter-enable">
            <a href="image1.jpg" data-productid="1870" data-price="29.99" data-msrp="59.99" data-isfeatured="" data-isnew="" data-gender="WOMENS" data-colour="BLUE">
        </div>
        <div class="ProductList product filter-disable">
            <a href="image2.jpg" data-productid="1871" data-price="46.99" data-msrp="59.99" data-isfeatured="10" data-isnew="" data-gender="WOMENS" data-colour="PURPLE">
        </div>

        <div class="ProductList product filter-enable">
            <a href="image3.jpg" data-productid="1872" data-price="19.99" data-msrp="59.99" data-isfeatured="" data-isnew="44" data-gender="MENS" data-colour="ORANGE">
        </div>
        <div class="ProductList product filter-enable">
            <a href="image4.jpg" data-productid="1872" data-price="59.99" data-msrp="99.99" data-isfeatured="" data-isnew="12" data-gender="MENS" data-colour="BLACK">
        </div>
    </div>
</div>

СНП-критерий

Поэтому, когда пользователи выбирают price-low, он должен сортировать только filter-enable div с использованием атрибута data-price и сортировать по LOW-TO-HIGH, filter-enable отображается на странице, а filter-disable в DOM

Код Jquery получил до сих пор

// DropDownList change event
$(document).on('change', ".sorting", function (e) {
        e.preventDefault();
        var sortString = $(".sorting option:selected").val();
        SortBy(sortString);
    });

function SortBy(sortString) {
        switch(sortString) {
            case "featured":
                {
                    sortUsingNestedText($('.show-all-products'), ".ProductList:visible", "data-isfeatured");
                    break;
                }
            case "whats-new":
                {
                    sortUsingNestedText($('.show-all-products'), ".ProductList:visible", "data-isnew");
                    break;
                }
            case "price-down":
                {
                    sortUsingNestedText($('.show-all-products'), "div", "data-price");
                    break;
                }
            case "price-up":
                {
                    sortUsingNestedText($('.show-all-products'), "div", "data-price");
                    break;
                }
        }
    }

 function sortUsingNestedText(parent, childSelector, keySelector) {
        var items = parent.children(childSelector).sort(function (a, b) {
            var vA = $(keySelector, a).text();
            var vB = $(keySelector, b).text();
            return (vA < vB) ? -1 : (vA > vB) ? 1 : 0;
        });
        parent.append(items);
    }

ОШИБКА

Нет ошибки, но не сортировка, только первая и вторая DIV сортируются. не все из них. Это потому, что у некоторых из DIV нет данных - isfeatured, data-isnew values?

patel.milanb 15 нояб. 2013, в 12:00

Источник

Теги:

jquery

html

asp.net

sorting

2 ответа

Ещё вопросы

Adeptus · Answer 1 · 2013-11-15T08-07-00.000Z

Я нашел основную причину. Вы используете неправильный селектор. Почему что-то вроде "$ (keySelector, a)", что это $ ("цена данных", "div")? во-вторых: вы получаете текст, но вам нужны данные attr, а данные находятся внутри "a" не в "div". Вы должны использовать что-то вроде:

var vA = $(a).children().attr(keySelector);
var vB = $(b).children().attr(keySelector);

Когда вы будете использовать это, ваша цена будет работать (price-down дает точно то же самое = те же параметры, введенные внутри одной и той же функции)

дайте мне проверить и даст вам знать ...
я думаю, что вы меня там .... что-то работает .. НО потому что у меня есть десятичная дробь в цене ... это все еще не сортирует это идеально ...
Вы можете использовать функцию parseFloat JavaScript
понял .... цены работают нормально, НО тогда как сортировать по data-isfeatured и data-isnew ... одна и та же функция не работает для этих двух
селектор .ProductList: видимый, возможно, не рабочий, но простой в использовании .filter-enable и будет таким же, верно?
да ... я могу использовать .filter-enable вместо .ProductList: visible

Yury Tarabanko · Answer 2 · 2013-11-15T09-54-00.000Z

Вам нужно преобразовать строки в float перед сортировкой по цене.

.sort(function (a, b) {
            var vA = parseFloat($(a).children().data(keySelector));
            var vB = parseFloat($(b).children().data(keySelector));
            return vA - vB;
        })

Поскольку @Adeptus указал, что keySelector оказался без префикса data-. '

.data (keySelector) здесь не будет работать, потому что param это «data-price». будет работать при смене параметра на «цену» :)
@Adeptus THX добавлено в качестве заметки. :)