我如何首先對一個值進行排序，而不對另一個進行排序？

Question

這是我的代碼 ：

<div id="fascia-filtri-etichette">
    <div data-title="m" data-preorder="order-2" class="item">m</div>    
    <div data-title="2013" data-preorder="order-3" class="item">2013</div>    
    <div data-title="2012" data-preorder="order-3" class="item">2012</div>
    <div data-preorder="order-4" id="fascia-filtri-etichette-cancella">DELETE</div>
    <div data-title="E" data-preorder="order-1" class="item">E</div>
    <div data-title="S" data-preorder="order-1" class="item">S</div>
    <div data-title="2014" data-preorder="order-3" class="item">2014</div>
</div>

<script>
    var items = $("#fascia-filtri-etichette" + ' > div');
    items.sort(function (a, b) {
        return a.getAttribute('data-title') > b.getAttribute('data-title') || a.getAttribute('data-preorder') > b.getAttribute('data-preorder');
    }).detach().appendTo($("#fascia-filtri-etichette"));    
</script>

我想先對div排序（升序）作為pre-order字段，而不是（因此對每個前面的塊）標題。

結果應為：

E // order 1
S // order 1
m // order 2
2012 // order 3
2013 // order 3
2014 // order 3
DELETE // order 4

我哪里錯了？

Answer 1

你的錯誤是

1. 排序功能應為-1或0或1，而不是true / false
2. 代碼混亂不堪，難以掌握其工作原理。 我不知道如何將標題排序和預購結合起來，這里可能有錯誤

它應該看起來像這樣

items.sort(function (a, b) {
    var po = a.getAttribute('data-preorder').localeCompare(b.getAttribute('data-preorder'));
    if(po != 0) return po;

    return a.getAttribute('data-title').localeCompare( b.getAttribute('data-title'));
});

首先，它應該去檢查預訂，然后再比較標題。 這是工作示例http://jsfiddle.net/rczjm4ph/

Answer 2

使用2個排序函數而不是一個。 測試用例http://jsfiddle.net/a47xv32f/

var items = $("#fascia-filtri-etichette" + ' > div');
items.sort(function (a, b) {
    return a.getAttribute('data-title') > b.getAttribute('data-title');
}).sort(function (a, b) {
    return a.getAttribute('data-preorder') > b.getAttribute('data-preorder');
}).detach().appendTo($("#fascia-filtri-etichette"));    

Answer 3

仍然可以通過單個sort()來完成：

var items = $("#fascia-filtri-etichette" + ' > div');
items.sort(function (a, b) {
    var cmpOrder = a.getAttribute('data-preorder').localeCompare(b.getAttribute('data-preorder'));

    if (cmpOrder !== 0) return cmpOrder;

    return a.getAttribute('data-title').localeCompare(b.getAttribute('data-title'));
});    

Answer 4

創建一個比較函數，該函數首先查看預購商品，然后查看預購商品相等的商品的標題：

items.sort(function (a, b) {
  var aPre = a.getAttribute('data-preorder');
  var bPre = b.getAttribute('data-preorder');
  if (aPre == bPre) {
    return a.getAttribute('data-title') > b.getAttribute('data-title') ? 1 : -1;
  } else {
    return aPre > bPre ? 1 : -1;
  }
}).detach().appendTo($("#fascia-filtri-etichette"));