排序图像通过他们的ID

Question

可能重复：
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

OR

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

Answer 2

var elem = $('#images'), 
    imgs = elem.find('img'); 
imgs.sort(function(a, b) { 
    return a.id.toUpperCase().localeCompare(b.id.toUpperCase()); 
}); 
$.each(imgs, function(idx, itm) { elem.append(itm); }); 

FIDDLE

Answer 3

我觉得@thecodeparadox版本更好，但这里是你的代码纠正一点点。我将img改为跨度以使其更加明显。

http://jsfiddle.net/whnyn/