javascript - 按 ID 对图像进行排序

Question

这个问题已经有答案了:

已关闭 11 年前。

Possible Duplicate:
How to sort LI's based on their ID

我有一个动态填充各种图像的 div，看起来像:

<div id="images">
<img id="img1" src="..." />
<img id="img3" src="..." />
<img id="img2" src="..." />
<img id="img6" src="..." />
<img id="img5" src="..." />
<img id="img4" src="..." />
</div>

使用 javascript 和 jQuery，我需要将图像按 ID 顺序排序，但我很困难。这是我到目前为止所得到的:

var toSort = $('#images').children;
toSort = Array.prototype.slice.call(toSort,0);


toSort.sort(function(a,b){
   var aord = +a.id.substr(6);
   var bord = +b.id.substr(6);  
   return aord - bord; 
});


var parent = $('#images');
parent.innerHTML="";
for(var i=0, l = toSort.length; i<l; ++i){
   parent.appendChild(toSort[i]);
}

我有多接近？我究竟做错了什么？谢谢大家。

Answer 1

var imgs = $('#images img');
imgs.sort(function(a, b) {
   return a.id > b.id;
});
$('#images').html(imgs);
​

<强> DEMO

或

var imgs = $('#images img');
imgs.sort(function(a, b) {
   return +a.id.replace('img','') -  +b.id.replace('img','');
});
$('#images').html(imgs);

<强> DEMO

带有您的代码的版本:

var parent = $('#images'),
    children = parent.children(),
    toSort = Array.prototype.slice.call(children, 0);

parent[0].innerHTML = ""; //or parent.empty();

toSort.sort(function(a, b) {
    var aord = +a.id.substr(3);
    var bord = +b.id.substr(3);
    return aord - bord;
});

for (var i = 0; i < toSort.length; i++) {
    parent.append(toSort[i]);
}

<强> DEMO