javascript - 无法使用排序功能正确排序 html 元素

Question

我尝试按从高到低对元素进行排序，有一些排序，但不是从高到低，这是我的代码：

$('.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')));    
    }
})

两者的结果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

第二个：

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


441 
316 
317 
474 
454 
338 
229 
321 
54

它们没有排序，并且缺少一个元素。欢迎任何建议。

$('.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>

标签： javascriptjqueryhtmlsorting