sort（）按第一位數字排序數據，而不是整數

Question

我有一種排序方法，我想根據它們的data-position屬性對我的div進行排序。目前，由於某種原因，函數只根據第一個數字對div進行排序，而不是整個數字。這裏是我的html的例子表明：

HTML

<div class="parent" data-position="1"> 
    ... 
</div> 

<div class="parent" data-position="27"> 
    ... 
</div> 

<div class="parent" data-position="3"> 
    ... 
</div> 

這裏的JS

$('body').on('click', '.new_comments', function(e) { 
    var divArr = $(".parent"); 
    divArr.sort(function(a, b) { 
     return $(a).attr('data-position') > $(b).attr('data-position') ? 1: -1; 
    }); 
$(".comments_container").append(divArr); 

}); 

任何想法，爲什麼它這個問題以及如何解決它？

Answer 1

$(a).attr('data-position') 

Attr以字符串的形式返回屬性值，所以你比較的是比較字符串，而不是數字，這就是你所期待的。而不是使用attr（）使用data（）。

$(a).data('position') 

兩者之間的區別是，jQuery將嘗試自動在屬性值轉換爲一個號碼，如果它可以在您使用data()。因此，將這些值轉換爲數字後，您應該可以看到您期望的排序。

Answer 2

將字符串數據轉換爲數字。

$('body').on('click', 'button', function(e) { 
 
    var divArr = $(".parent"); 
 
    
 
    divArr.sort(function(a, b) { 
 
    return +$(a).attr('data-position') > +$(b).attr('data-position') ? 1 : -1; 
 
    }); 
 

 
    $(".comments_container").append(divArr); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> 
 
<button>CLICK ME</button> 
 

 
<div class="comments_container"> 
 
    <div class="parent" data-position="1"> 
 
    1 </div> 
 
    <div class="parent" data-position="27"> 27 </div> 
 
    <div class="parent" data-position="3"> 3 </div> 
 
</div>

而且我會首先收集的屬性，而不是在回調反覆做這件事的。

$('body').on('click', 'button', function(e) { 
 
    $(".parent") 
 
    .map((i, el) => ({el: el, pos: +el.dataset.position})) 
 
    .sort((a, b) => a.pos > b.pos ? 1 : -1) 
 
    .map((i, {el}) => el) 
 
    .appendTo(".comments_container"); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> 
 
<button>CLICK ME</button> 
 

 
<div class="comments_container"> 
 
    <div class="parent" data-position="1"> 1 </div> 
 
    <div class="parent" data-position="27"> 27 </div> 
 
    <div class="parent" data-position="3"> 3 </div> 
 
</div>

我也包括在這個解決方案的一些現代語法