javascript - div 按最多 4 位数字的价格排序，但不会发生 5 位数字的排序

Question

我有一个显示结果的搜索结果页面。我已经实现了https://jsfiddle.net/f8w1hpj2/2/此代码用于排序。

名称排序一切正常。但是如果价格是 1000、2000、2500、3000(只有 4 位数字)，则价格排序有效。 但如果价格类似于 2000、3000、4000、9000、11000，则不会按降序排序。

它显示 9000、4000、3000、2000，然后是 11000。

html 按价格排序:
按名称排序:

    <div id= "row" class="row">
        <div id="items" class="col-md-7">
        <div class="clist">
            <div data-sid="2000" data-name="c">
                <a href="www.example.com?id=1">
                    <div style="margin-bottom: 2px; text-align: left; background-color: green;">
                        <div>
                            Name:
                            <h1>C</h1>
                        </div>
                        <div>Price:2000</div>

                    </div>
                </a>
            </div>
            <div data-sid="3000" data-name="a">
                <a href="www.example.com?id=2">
                    <div style="margin-bottom: 2px; text-align: left; background-color: green;">
                        <div>
                            Name:
                            <h1>A</h1>
                        </div>
                        <div>Price:3000</div>

                    </div>
                </a>
                </div>
            <div data-sid="11000" data-name="b">
                <a href="www.example.com?id=3">
                    <div style="margin-bottom: 2px; text-align: left; background-color: green;">
                        <div>
                            Name:
                            <h1>B</h1>
                        </div>
                        <div>Price:11000</div>

                    </div>
                </a>
            </div>
            </div>
        </div>

    </div>

j查询

$(document).ready(function(){
    $('#price').on('click', function(){
    var s = $(this).data('sort'); console.log(s);
    if(s === 0){
        $(this).data('sort', 1);
        $('.clist > div').sort(function(a,b){
           return a.dataset.sid < b.dataset.sid
        }).appendTo('.clist')            
    }else{
        $(this).data('sort', 0);
        $('.clist > div').sort(function(a,b){
           return a.dataset.sid > b.dataset.sid
        }).appendTo('.clist')
    }
});

    $('#name').on('click', function(){
    var s = $(this).data('sort'); console.log(s);
    if(s === 0){
        $(this).data('sort', 1);
        $('.clist > div').sort(function(a,b){
           return a.dataset.name < b.dataset.name
        }).appendTo('.clist')            
    }else{
        $(this).data('sort', 0);
        $('.clist > div').sort(function(a,b){
           return a.dataset.name > b.dataset.name
        }).appendTo('.clist')
    }
});

});

感谢任何帮助。 提前致谢

Answer 1

您排序的是字符串，而不是数字。

$('.clist > div').sort(function(a,b){
    return parseInt(a.dataset.sid, 10) > parseInt(b.dataset.sid, 10);
}).appendTo('.clist');

减法也应该有效

$('.clist > div').sort(function(a,b){
    return a.dataset.sid - b.dataset.sid;
});