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 に答える