按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

或

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更改为span以使其更加明显。

http://jsfiddle.net/whnyn/