Cannot sort properly html elements with sort function

Question

I tried do sort elements by highest to lowest value, there is some sorting, but it is not hightest to lowest, here is my code:

$('.first-column-sort-button').on('click', function() {
    $( ".oi-compare-payment-1" ).each(function() {
        console.log($(this).data('sortval'));
    });

    $(".oi-compare-row").sort(sort_val).appendTo('.oi-compare-table-header')
    function sort_val(a, b){
        console.log(parseInt($(a).find('.oi-compare-payment-1').data('sortval')));
        return (parseInt($(a).find('.oi-compare-payment-1').data('sortval')) > parseInt($(b).find('oi-compare-payment-1').data('sortval')));    
    }
})

Result from both console.log():

console.log($(this).data('sortval'));

299.00
441.37
316.34
317.38
474.10
454.28
338.17
229.75
321.00
54

and second one:

console.log(parseInt($(a).find('.oi-compare-payment-1').data('sortval')));


441 
316 
317 
474 
454 
338 
229 
321 
54

They are not sorted and one element missing. Any suggestion is welcome.

$('.first-column-sort-button').on('click', function() {
    $( ".oi-compare-payment-1" ).each(function() {
        console.log($(this).data('sortval'));
    });

    $(".oi-compare-row").sort(sort_val).appendTo('.oi-compare-table-header')
    function sort_val(a, b){
        console.log(parseInt($(a).find('.oi-compare-payment-1').data('sortval')));
        return (parseInt($(a).find('.oi-compare-payment-1').data('sortval')) > parseInt($(b).find('oi-compare-payment-1').data('sortval')));    
    }
})

body {
  background: white;
}

.as-console-wrapper {
  position: inherit !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<h3>Unsorted:</h3>

<div class="oi-compare-row" id="oi-compare-row-1">
    <div class="oi-compare-company"><img src="" alt="test1"><span>test1</span></div>
    <!--oi-compare-company-->
    <div class="oi-compare-payment oi-compare-payment-1" data-sortval="299.00">
        <div class="oi-compare-calculation"><span class="amt">еднократно</span><span class="eq-after"></span><b class="oi-compare-total">299.00</b></div>
        <!--oi-compare-calculation-->
    </div>
    <!--oi-compare-payment-1-->
    <div class="oi-compare-payment oi-compare-payment-2" data-sortval="299.40">
        <div class="oi-compare-calculation"><span class="amt">156.20</span><span class="plus">+</span><span class="amt">143.20</span><span class="eq">=</span><span class="eq-after"></span><b class="oi-compare-total">299.40</b></div>
        <!--oi-compare-calculation-->
    </div>
</div>
<div class="oi-compare-row" id="oi-compare-row-2">
    <div class="oi-compare-company"><img src="" alt="test2"><span>test2</span></div>
    <!--oi-compare-company-->
    <div class="oi-compare-payment oi-compare-payment-1" data-sortval="441.37">
        <div class="oi-compare-calculation"><span class="amt">еднократно</span><span class="eq-after"></span><b class="oi-compare-total">441.37</b></div>
        <!--oi-compare-calculation-->
    </div>
    <!--oi-compare-payment-1-->
    <div class="oi-compare-payment oi-compare-payment-2" data-sortval="223.55">
        <div class="oi-compare-calculation"><span class="amt">460.10</span><span class="plus">+</span><span class="amt">236.55</span><span class="eq">=</span><span class="eq-after"></span><b class="oi-compare-total">223.55</b></div>
        <!--oi-compare-calculation-->
    </div>
</div>

<button class="first-column-sort-button">Sort</button>

<h3>Sorted:</h3>

<div class="oi-compare-table-header"></div>

Does this answer your question? [Sorting in JavaScript: Shouldn't returning a boolean be enough for a comparison function?](https://stackoverflow.com/questions/24080785/sorting-in-javascript-shouldnt-returning-a-boolean-be-enough-for-a-comparison) — VLAZ, Apr 13 '20 at 09:24
Don't return a boolean - that can trick the sorting algorithm into a different order for the items. Just [compare the two values numerically](https://stackoverflow.com/questions/1063007/how-to-sort-an-array-of-integers-correctly) — VLAZ, Apr 13 '20 at 09:26
I tried with`return (parseInt($(a).find('.oi-compare-payment-1').data('sortval')) - parseInt($(b).find('oi-compare-payment-1').data('sortval')));` also tried with: `if a > b return 1` `if a < b return -1` `else return 0` same result. — Sahin Urkin, Apr 13 '20 at 09:31
In that case we would need a sample of your data you are using for a [mcve]. It's very hard to answer what's wrong right now because that should be correct. — VLAZ, Apr 13 '20 at 09:32
In `parseInt($(b).find('oi-compare-payment-1').data('sortval'))` you are missing a dot, it should be `find('.oi-compare-payment-1')` - you're looking for a class but the CSS selector doesn't match that. — VLAZ, Apr 13 '20 at 10:07
I know, right xD I had to debug it to figure out what was happening until I finally noticed the selector being different. This happens *a lot*, honestly - missing a `.` or a `#` in front, or using the wrong one (e.g, doing `.selector` instead of `#selector`). Unfortunately, jQuery quite happily accepts it and doesn't warn you in any way that it didn't match anything. Would have been somewhat better if it did or if you could at least opt into something that will give you such a message. — VLAZ, Apr 13 '20 at 10:14

Cannot sort properly html elements with sort function

0 Answers0