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>

SORT-基準

したがって、ユーザーが を選択すると、data-price 属性を使用して divprice-lowのみfilter-enableを並べ替え、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);
    }

エラー

エラーはありませんが、並べ替えは行われておらず、最初と 2 番目の DIV のみが並べ替えられています。それらのすべてではありません。一部の DIV に data-isfeatured、data-isnew 値がないためですか?

4

2 に答える 2

2

主な理由を見つけました。間違ったセレクターを使用しています。なぜ "$(keySelector, a)" のようなものが $("data-price", "div") なのですか? 2番目：テキストを取得しますが、データ属性が必要で、データは「div」ではなく「a」内にあります。次のようなものを使用する必要があります。

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

これを使用すると、値上げが機能します（値下げはまったく同じ=同じ関数内に同じパラメータを配置します）

于 2013-11-15T10:44:29.987 に答える