爲每個（）元素按Id排序，而不是dom位置運行函數

Question

我有一個可以在dom中重新排列的單詞列表，我需要按特定順序抓住每個單詞。我（有點）計算了我需要它們的順序，並使用jQuery將該數字用作它們的Id。

我的問題是我如何通過每個人都從最低編號的Id開始，以最高結束？

的HTML看起來是這樣的：

<span class="chosenword" id="577.9848041534424" style="position: absolute; top: 320px; left: 442.9999694824219px; z-index: 1;">Word!</span> 

和JS是這樣的：

$('.chosenword').each(function(){ 
    var position = $(this).position(); 
    var id = ((position.left) * (position.top)); 
    $(this).attr('id', id); 
    var chosenword = $(this).html(); 


    $('#chosenwords').append(chosenword); 
    $('#chosenwords').append(" "); 
    }); 

請注意，我沒有真正抓住具有ID，這樣我可以在環繞跨度抓住他們後不會重新排列他們，至少我不想。

任何想法？

Answer 1

.sort()他們先，然後用.each()像你循環正在已經做：

$($('.chosenword').toArray().sort(function(a,b){return +a.id - b.id;})).each(function(){ 
    // your existing code here 
}); 

或者如果緩存jQuery對象，你可以在地方對它進行排序，從而節省您不必後創建另一個jQuery對象排序：

var $chosen = $('.chosenword'); 
[].sort.call($chosen, function(a,b){return +a.id - b.id;}); 
$chosen.each(function() { 
    // your existing code here 
}); 

Answer 2

兩件事：

儘量不要在ID使用的號碼。一般來說，如果標識符以字母或下劃線開頭，那麼它最好。

<div><span class="chosenword" order="1">Word 1</span> - 
<span class="chosenword" order="550">Word 550</span> - 
<span class="chosenword" order="57">Word 57</span> 
</div> - 
<div id="chosenwords"></div>​ 

試排數組，然後要通過他們每個人你設置後，他們的訂單

$('.chosenword').each(function(){ 
    var position = $(this).position(); 
    var order = ((position.left) * (position.top)); 
    $(this).attr('order', order); 
}); 

$('.chosenword').sort(sortByOrderAttr).each(function() { 
    var chosenword = $(this).html() + " - "; 
    $('#chosenwords').append(chosenword); 
}); 

function sortByOrderAttr(a, b) { 
    var idA = parseInt($(a).attr('order')); 
    var idB = parseInt($(b).attr('order')); 
    if (idA < idB) { 
     return -1; 
    } else { 
     return 1 
    } 
}​