0

我有一个这样的 DIV 结构，并想使用以下选项进行排序。

  1. 什么是新的
  2. 精选
  3. 降价
  4. 涨价

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使用 data-price 属性对 div 进行排序，并按 LOW-TO-HIGH 排序，filter-enable在页面上可见并filter-disable隐藏在 DOM 中

Jquery Code 到目前为止

// 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 没有 data-isfeatured、data-isnew 值吗？

4

2 回答 2

2

我找到了主要原因。您使用了错误的选择器。为什么像 "$(keySelector, a)" 什么是 $("data-price", "div")？第二：你得到文本，但你需要数据属性和数据在“a”中而不是在“div”中你应该使用类似的东西：

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

当您使用它时，您的价格上涨将起作用（价格下跌给出完全相同的 = 相同的参数放在相同的函数中）

于 2013-11-15T10:44:29.987 回答
1

在按价格排序之前，您需要将字符串转换为浮点数。

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

正如@Adeptus 指出的那样keySelector，必须没有data-前缀。`

于 2013-11-15T11:19:39.800 回答