CODEWITHSUNDEEP
javascriptjquery
Jack
Jack

Reputation: 6620

Sort function does not work properly

I have a list of numbers that need to be sorted. I am using a function as following but it does not sort them properly.

<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>

Upvotes: 1

Views: 37

Answers (2)

StackSlave
StackSlave

Reputation: 10627

Should be

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

because $('.mylist > div') is an Array of DOM Elements and and Element.dataset.sid is a String.

Upvotes: 0

bugwheels94
bugwheels94

Reputation: 31920

Convert your values to number using Number() like

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>

Upvotes: 2

Related Questions