如何在Jquery中按属性排序Div

Question

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

1. Whats-new
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-标准

因此，当用户选择price-low时，它应仅使用data-price属性对filter-enable div进行排序，并按LOW-TO-HIGH排序，filter-enable在页面上可见{\ n} { {1}}隐藏在DOM

中 到目前为止

Jquery Code

filter-disable

ERROR

没有错误，但它没有做任何排序，只有第一和第二个DIV正在排序。不是所有的人。是因为有些DIV没有数据 - 数据，数据是新值吗？

Answer 1

我找到了主要原因。你使用错误的选择器。为什么像“$（keySelector，a）”这样的东西是什么（$“data-price”，“div”）？ 第二：你得到文字但你需要数据attr而数据在“a”里面而不是在“div”中你应该使用类似的东西：

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

当你使用它时，你的价格上涨将起作用（降价给出完全相同的=同一个函数放在同一个函数内）

Answer 2

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

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

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