排序功能无法正常工作

Question

我有一个需要排序的数字列表。我使用的函数如下，但它没有正确排序。

<div class="mylist">
    <div class="item" data-sid="0.98">
        <p>0.98</p>
    </div>
    <div class="item" data-sid="4.29">
        <p>4.29</p>
    </div>
    <div class="item" data-sid="0.98">
        <p>0.98</p>
    </div>
    <div class="item" data-sid="23.59">
        <p>23.59</p>
    </div>
</div>

JS

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

        $(this).data('sort', 0);
        $('.mylist > div').sort(function(a, b) {
            return a.dataset.sid > b.dataset.sid
        }).appendTo('.mylist')
    }
});

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

        $(this).data('sort', 0);
        $('.mylist > div').sort(function(a, b) {
            return a.dataset.sid > b.dataset.sid
        }).appendTo('.mylist')
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="num">Num</div>
<div class="mylist">
    <div class="item" data-sid="0.98">
        <p>0.98</p>
    </div>
    <div class="item" data-sid="4.29">
        <p>4.29</p>
    </div>
    <div class="item" data-sid="0.98">
        <p>0.98</p>
    </div>
    <div class="item" data-sid="23.59">
        <p>23.59</p>
    </div>
</div>

Answer 1

使用Number()

将您的值转换为数字

return Number(a.dataset.sid) < Number(b.dataset.sid)

$('#num').on('click', function() {
            var s = $(this).data('sort');
            if (s === 0) {
                $(this).data('sort', 1);
                $('.mylist > div').sort(function(a, b) {
                    return Number(a.dataset.sid) < Number(b.dataset.sid)
                }).appendTo('.mylist')
            } else {

                $(this).data('sort', 0);
                $('.mylist > div').sort(function(a, b) {
                    return Number(a.dataset.sid) > Number(b.dataset.sid)
                }).appendTo('.mylist')
            }
        });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="num">Num</div> 
<div class="mylist">
                        

                            <div class="item" data-sid="0.98">
                                <p>0.98</p>
                            </div>
                            <div class="item" data-sid="4.29">
                                <p>4.29</p>
                            </div>
                            <div class="item" data-sid="0.98">
                                <p>0.98</p>
                            </div>
                            <div class="item" data-sid="23.59">
                                <p>23.59</p>
                            </div>
</div>

Answer 2

应该是

return +a.dataset.sid - +b.dataset.sid

因为$('.mylist > div')是一个DOM元素数组，Element.dataset.sid是一个字符串。