javascript - 使用javascript排序函数根据条件对数组进行排序

Question

我想根据数字对 javascript 数组进行排序，但我希望特定组(例如推荐)排在第一位并按升序排列，然后是没有类型的其他组。

下面是 div，我想按照推荐排在第一位的方式排序，然后按升序排列其他 div。

下面的代码正确地按升序对没有data-type 的 div 进行了排序，但Recommended 没有按预期按升序排序。

var sortedDivs = $(".terminalpopular").toArray().sort(sorter);
console.log(sortedDivs); 

function sorter(a, b) {
    if(a.getAttribute('data-type') == 'Recommended'){
        if (parseFloat(a.getAttribute('data-amount')) < parseFloat(b.getAttribute('data-amount'))){
          return -1;
        }
        return 0;
    }
    else{
      if (parseFloat(a.getAttribute('data-amount')) > parseFloat(b.getAttribute('data-amount'))){
        return 1;
      }
      return 0;
    }
  }

以上代码以如下形式对 div 进行排序；

<div class="hotel-list listing-style3 hotel" id="list_view_listingpopular">
    <div class="terminalpopular" data-amount="65.95" data-type="Recommended">
    </div>
    <div class="terminalpopular" data-amount="94.95" data-type="Recommended">  </div>
    <div class="terminalpopular" data-amount="70" data-type="Recommended">
    </div>
    <div class="terminalpopular" data-amount="54.95" data-type="">
    </div>
    <div class="terminalpopular" data-amount="67.99" data-type="">
    </div>
    <div class="terminalpopular" data-amount="75" data-type="">
    </div>
    <div class="terminalpopular" data-amount="78" data-type="">
    </div>
    <div class="terminalpopular" data-amount="84.99" data-type="">
    </div>
    <div class="terminalpopular" data-amount="84.99" data-type="">
    </div>
    </div>

可以看出，没有任何data-type 的div 排序正确，但Recommended div 没有按预期升序排序。

注意:它确实出现在 IF 子句中并且条件确实满足，即 (if(a.getAttribute('data-type') == 'Recommended'){})。我已将控制台置于 IF 中，它会比较值。

请帮忙。谢谢

Answer 1

感谢 JS 中的类型转换，您可以使用 bool 值(如比较)作为数字。弦乐也一样。由于 - 是一个数字运算，字符串也将被转换为数字。

因此您可以将其视为对两个“属性”进行简单的数字排序。

function sorter(a, b) {
    return (b.dataset.type === 'Recommended') - (a.dataset.type === 'Recommended') 
        || a.dataset.amount - b.dataset.amount;
}

var sortedDivs = $(".terminalpopular").toArray().sort(sorter);

console.log(sortedDivs)

.as-console-wrapper{top:0;max-height:100%!important}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hotel-list listing-style3 hotel" id="list_view_listingpopular">
  <div class="terminalpopular" data-amount="65.95" data-type="Recommended">
  </div>
  </div>
  <div class="terminalpopular" data-amount="54.95">
  </div>
  <div class="terminalpopular" data-amount="70" data-type="Recommended">
  <div class="terminalpopular" data-amount="84.99">
  </div>
  <div class="terminalpopular" data-amount="94.95" data-type="Recommended"> </div>
  <div class="terminalpopular" data-amount="75">
  </div>
  <div class="terminalpopular" data-amount="67.99">
  </div>
  <div class="terminalpopular" data-amount="78">
  </div>
  <div class="terminalpopular" data-amount="84.99">
  </div>
</div>