Jquery排序多个项目和2位数字

时间:2015-05-13 18:09:32

标签: javascript jquery

我在排序方面没有什么问题。

现在我有3个类别,我必须对名称,价格和数量进行排序。

使用这个脚本,当我按名称和价格出售时它的工作,但它总是搞乱了数量。

问题在哪里,是否有更好的解决方案来解决这个问题? 另外两位数的数字并不好,当它的10位时它将其置于1之后。

JS:

function sortUsingNestedText(parent, childSelector, keySelector, sortType) {
    var items = parent.children(childSelector).sort(function(a, b) {
        var vA = $(keySelector, a).text();
        var vB = $(keySelector, b).text();


        if(sortType=='price') {
            vA = parseInt(vA.substr(1));
            vB = parseInt(vB.substr(1));
        }               
        return (vA < vB) ? -1 : (vA > vB) ? 1 : 0;
    });
    parent.append(items);
}

/* setup sort attributes */
$('#sName').data("sortKey", "span.name");
$('#sPrice').data("sortKey", "span.price");
$('#sQuantity').data("sortKey", "span.items");


/* sort on button click */
$(".btnSort").click(function() {
   sortUsingNestedText($('#list-category-results'), "li", $(this).data("sortKey"), $(this).data('sortType'));
});

HTML:

    <ul id="sort-options" class="clearfix">
        <li>
            <a href="#" id="sName" class="btnSort">
                Name
            </a>
        </li>
        <li>
            <a href="#" id="sPrice" class="btnSort">
                Price
            </a>
        </li>
                    <li>
            <a href="#" id="sQuantity" class="btnSort">
                quantity
            </a>
        </li>
    </ul>

    <!-- Items to sort -->

    <ul id="list-category-results" class="clearfix">
        <li>

                <span class="name">ferrari</span>
                <span class="price">35</span>
                <span class="quantity">200</span>

        </li>
        <li>

                <span class="name">aston martin</span>       
                <span class="price">6</span>
                 <span class="items">600</span>

        </li>

        <li>

                <span class="name">audi</span>                    
                <span class="price">10</span>
                 <span class="items">400</span>

        </li>
        <li>

                <span class="name">bmw</span>                
                <span class="price">20</span>
                 <span class="items">1099</span>

        </li>
        <li>

                <span class="name">lambhorgini</span>                
                <span class="price">25</span>
                 <span class="items">185</span>

        </li>



    </ul>

Fiddle example

1 个答案:

答案 0 :(得分:0)

问题在于您正在比较数量与实际数量的文本。你需要做一些与你所做的相似的事情,但是也没有必要将文本分成parseInt

中的第一个字符。

http://jsfiddle.net/w7ygmm63/1/

function sortUsingNestedText(parent, childSelector, keySelector, sortType) {
    var items = parent.children(childSelector).sort(function(a, b) {
        var vA = $(keySelector, a).text();
        var vB = $(keySelector, b).text();


        if(sortType==='numeric') {
            vA = parseInt(vA, 10);
            vB = parseInt(vB, 10);
        }               
        return (vA < vB) ? -1 : (vA > vB) ? 1 : 0;
    });
    parent.append(items);
}

/* setup sort attributes */
$('#sName').data("sortKey", "span.name");
$('#sPrice').data("sortKey", "span.price");
$('#sPrice').data("sortType", "numeric");
$('#sQuantity').data("sortKey", "span.quantity");
$('#sQuantity').data("sortType", "numeric");


/* sort on button click */
$(".btnSort").click(function() {
   sortUsingNestedText($('#list-category-results'), "li", $(this).data("sortKey"), $(this).data('sortType'));
});