0

可能重复：
如何根据 ID 对 LI 进行排序

我有一个动态填充各种图像的 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]);
}

我离我有多近？我究竟做错了什么？多谢你们。

4

3 回答 3

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

演示

或者

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

演示

带有您的代码的版本：

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]);
}

演示

于 2012-07-25T13:53:15.903 回答
0 
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); });

小提琴

于 2012-07-25T13:55:22.273 回答
0

我认为@thecodeparadox 版本更好，但这里是您的代码更正了一点。我将 img 更改为 span 以使其更明显。

http://jsfiddle.net/whnyn/

于 2012-07-25T14:03:12.340 回答