如何使用第二个变量对重复值进行一致排序? [javascript]

How to get consistant sorting with duplicate values using a second variable? [javascript]

尝试用 javascript 对 div 的列表进行排序时,重复值的结果不一致:

在存在重复值的情况下,排序结果取决于 div 在 DOM 中排在第一位。我们如何通过对第二个变量 (data-foo) 进行排序来对这些重复项进行排序,以便独立于 DOM 顺序得到相同的结果?

代码:

<script>
    var $wrapper = $('.table');
    $wrapper.find('.cell').sort(function (b, a) {
        return +a.getAttribute('data-number') - +b.getAttribute('data-number');
    })
    .appendTo( $wrapper);   
</script>
<div class="table">
    <div class="cell" data-number="15.2" data-foo="324"></div>
    <div class="cell" data-number="15.2" data-foo="223"></div>
    <div class="cell" data-number="52.8" data-foo="15468"></div>
    <div class="cell" data-number="16.0" data-foo="32"></div>
    <div class="cell" data-number="15.2" data-foo="454"></div>
    <div class="cell" data-number="41.9" data-foo="787"></div>
    <div class="cell" data-number="12.3" data-foo="432"></div>
    <div class="cell" data-number="12.3" data-foo="23"></div>
</div>

更改排序函数,使其检查第一个排序字段是否相等。如果是,则 returns 改为基于第二个排序字段的结果。

$wrapper.find('.cell').sort(function (b, a) {
    var number1 = +a.getAttribute('data-number'),
        number2 = +b.getAttribute('data-number');
    if (number1 == number2) {
        return +a.getAttribute('data-foo') - +b.getAttribute('data-foo');
    } else {
        return number1 - number2;
    }
})