Sorting images by their ID

Question

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

I have a div that is dynamically populated with various images and looks something like:

<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>

Using javascript and jQuery, i need to sort the images into order of ID but i'm struggling. Heres what I've got so far:

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

How close am I? What am I doing wrong? Thanks guys.

Is there a problem with your code? – Felix Kling Jul 25 '12 at 13:51 — Felix Kling, Jul 25 '12 at 13:51

thecodeparadox · Accepted Answer · 2012-07-25T14:16:46.470

3

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

Edition with your code:

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

edited Jul 25 '12 at 14:16

answered Jul 25 '12 at 13:53

thecodeparadox

86,271
21
138
164

1

The `.sort` callback should return an integer (`< 0`, `0` or `> 0`), not a boolean. – Felix Kling Jul 25 '12 at 13:53
alternatively you can use return (a.id > b.id) ? 1 : (a.id < b.id) ? -1 : 0; but i dont think that 2 images will have the same id so it will have the same result – r3bel Jul 25 '12 at 14:05
I've tried to use the bottom example but I'm getting the error "Object doesn't support property or method 'sort'"? Any ideas as to why? – user1055650 Jul 25 '12 at 14:08
@user1055650 do you try with exactly my demo? – thecodeparadox Jul 25 '12 at 14:12
@user1055650 `.substr(6)` has some problem, I think because `id` in your post has not that length. it should `substr(3)` – thecodeparadox Jul 25 '12 at 14:14
I eventually got this working using your third example. Thank you so much for your time! – user1055650 Jul 26 '12 at 15:26

adeneo · Answer 2 · 2012-07-25T14:00:22.447

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

FIDDLE

edited Jul 25 '12 at 14:00

answered Jul 25 '12 at 13:55

adeneo

312,895
29
395
388

score 0 · Answer 3 · answered Jul 25 '12 at 14:03

0

I think @thecodeparadox version is better but here is your code corrected a little bit. I changed img to span to make it more visible.

http://jsfiddle.net/whnyn/

answered Jul 25 '12 at 14:03

Łukasz Wojciechowski

926
6
20

Sorting images by their ID

3 Answers3