첫 번째 숫자가 아닌 정수로 정렬

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> 

자바 스크립트 :

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

왜 그냥 compareText에서 a1.innerText - a2.innerText를 사용할 수 있습니까?

설명

적은와 자바 스크립트는 두 개의 문자열, 아무 문제 비교할 수로, 정수로 변환하지 않는 자바 스크립트 문자보다 큰 사용하여 두 개의 문자열을 비교합니다. 예를 들어 "10" > "2"은 true을 반환하며 원인은 "10"입니다.

그러나 빼기 연산자를 사용하면 javascript는 문자열을 빼서 정수로 변환 할 수 없습니다.

Answer 2

parseInt를 사용하여 문자열 변수를 정수로 변환합니다.

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

제 자리로 정렬하여 정렬 스트링이다.

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