最初の数字ではなく、整数で並べ替え

Question

私はスクリプトを持っています。その目的は、divクラス（画像を含む）全体のリストをそのdivクラス内の数字で昇順に並べ替えることです。それはボタンを押すだけで動作しなければならない。それは全体として数字ではなく最初の桁で項目をソートすることを除いて、比較的うまく動作します（1,10,11,2,3などの配置になります）

私のコード全体は下ですこの問題を解決する方法を教えてください。

注：私はすべての可能な解決策を探していますが、それは現在の形に近いスクリプトを維持することが可能だ場合、私は好むこと

CSS：

.number{ 
display:block; 
color:black; 
font-size:30px; 
margin:20px 
} 

HTML：

<div id="sortingbutton"> 
<button>Sorting Button</button> 
</div> 

</div> 
<ul id="list"> 

<li> 
<div class="number">5</div> 
<img src="http://i.imgur.com/b70bLk1.png" width="250px" height="250px" alt="aqua" /> 
</li> 
<li> 
<div class="number">4</div> 
<img src="http://i.imgur.com/keE5Thi.png" width="250px" height="250px" alt="tan" /> 
</li> 
<li> 
<div class="number">1</div> 
<img src="http://i.imgur.com/EgqCTZJ.png" width="250px" height="250px" alt="black" /> 
</li> 
<li> 
<div class="number">3</div> 
<img src="http://i.imgur.com/4onkGsz.png" width="250px" height="250px" alt="grey" /> 
</li> 
<li> 
<div class="number">9</div> 
<img src="http://i.imgur.com/To88ZFN.png" width="250px" height="250px" alt="orange" /> 
</li> 
<li> 
<div class="number">2</div> 
<img src="http://i.imgur.com/6ZtB1VW.png" width="250px" height="250px" alt="purple" /> 
</li> 
<li> 
<div class="number">6</div> 
<img src="http://i.imgur.com/5Pz2Q2Y.png" width="250px" height="250px" alt="yellow" /> 
</li> 
<li> 
<div class="number">7</div> 
<img src="http://i.imgur.com/VqAdV1K.png" width="250px" height="250px" alt="blue" /> 
</li> 
<li> 
<div class="number">8</div> 
<img src="http://i.imgur.com/4HCxTpm.png" width="250px" height="250px" alt="green" /> 
</li> 
<li> 
<div class="number">10</div> 
<img src="http://i.imgur.com/JjjHmM0.png" width="250px" height="250px" alt="pink" /> 
</li> 
<li> 
<div class="number">11</div> 
<img src="http://i.imgur.com/EpB8YgU.png" width="250px" height="250px" alt="Red" /> 
</li> 

</ul> 

Javascript：

window.onload = function() { 
var desc = false; 
document.getElementById("sortingbutton").onclick = function() { 
    sortUnorderedList("list", desc); 
    desc = !desc; 
    return false; 
} 
} 

function compareText(a1, a2) { 
var t1 = a1.innerText, 
    t2 = a2.innerText; 
return t1 > t2 ? 1 : (t1 < t2 ? -1 : 0); 
} 

function sortUnorderedList(ul, sortDescending) { 
    if (typeof ul == "string") { 
     ul = document.getElementById(ul); 
    } 

var lis = ul.getElementsByTagName("LI"); 
var vals = []; 

for (var i = 0, l = lis.length; i < l; i++) { 
    vals.push(lis[i]); 
} 

vals.sort(compareText); 

if (sortDescending) { 
    vals.reverse(); 
} 

ul.innerHTML = ''; 
for (var i = 0, l = vals.length; i < l; i++) { 
    ul.appendChild(vals[i]); 
} 
} 

Answer 1

？あなたはjavascriptの2つの文字列、何の問題を比較できるように、整数に変換しませんjavascriptのシンボルよりも少ないと大きなを使用して2つの文字列を比較する

説明

。たとえば、"10" > "2"はtrueを返します。原因は"10"です。

ただし、減算演算子を使用すると、javascriptは文字列を減算して整数に変換できません。

Answer 2

parseIntを使用して、文字列変数を整数に変換します。最初の数字によってソート

http://www.w3schools.com/jsref/jsref_parseint.asp

列ソートです。ただcompareTextでa1.innerText - a2.innerTextを使用しないのはなぜ

for (var i = 0, l = lis.length; i < l; i++) { 
    vals.push(parseInt(lis[i], 10)); 
}