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

为什么不在a1.innerText - a2.innerText中使用compareText？

<强>解释

当你使用less和大于符号比较两个字符串时javascript不会将它们转换为整数，因为javascript可以比较两个字符串，没问题。例如，"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));
}

按第一个数字排序而不是整数

2 个答案: