排序數據屬性

我寫了一個函數，它應該按照價格高 - >低排序data-cost數據屬性。當data-cost都具有相同數量的數字時，它工作正常，但如果我添加具有不同數量的數字的data-cost，則該功能不再有效。我想保持現在的結構，但由於我對JS還比較陌生，因此我開放給更多可重用的解決方案。預先感謝您的幫助。排序數據屬性

小提琴：

http://jsfiddle.net/dn6mja0t/

HTML：

<a id="sort" href="#">Price High to Low</a> 

<ul class="returned-list"> 
    <li data-cost="101">101</li> 
    <li data-cost="103">103</li> 
    <li data-cost="106">106</li> 
    <li data-cost="42">42</li> 
</ul>

JS：

var sortHL = function() { 
    function compare(a,b) { 
     if (a.cost > b.cost) 
      return -1; 
     if (a.cost < b.cost) 
      return 1; 
     return 0; 
    } 

    var items = []; 
    $('.returned-list li').each(function() { 
     var item = { 
      cost: $(this).attr('data-cost'), 
      contents: $(this)[0].outerHTML 
     }; 
     items.push(item); 
    }); 

    items.sort(compare); 
    $('.returned-list').html(''); 
    for(var i=0;i<items.length;i++) { 
     $('.returned-list').append(items[i].contents); 
    } 
}; 

$('#sort').on('click', function() { 
    sortHL(); 
});

來源

2014-12-04 Dann

執行強制類型轉換：

cost: Number($(this).attr('data-cost')),

來源

2014-12-04 19:36:58 Verhaeren

我覺得傻不是想這個。像魅力一樣工作，謝謝！ – Dann 2014-12-04 20:16:48

@Dann歡迎您。 – Verhaeren 2014-12-04 21:47:23

你將要使用

cost: parseInt($(this).attr('data-cost'), 10)

在你的對象構造，這樣就比較成本數字並不爲字符串。

來源

2014-12-04 19:34:39 Bergi

這裏是一個簡短的形式：

var sortHL = function() { 
    $(".returned-list li[data-cost]").detach().sort(function(a,b){ 
     return Number($(a).attr('data-cost')) < Number($(b).attr('data-cost')) 
    }).appendTo($(".returned-list")) 
}; 

$('#sort').on('click', function() { 
    sortHL(); 
});

來源

2014-12-04 19:37:32 juvian

排序數據屬性

回答

相關問題