Question

I would like to sort a div by DESCENDING order based on their image name.

Change From this:

<div id="sort-this-div">
<p><img src="image/1.jpg"/></p>
<p><img src="image/3.jpg"/></p>
<p><img src="image/4.jpg"/></p>
<p><img src="image/2.jpg"/></p>
</div>

To This

<div id="sort-this-div">
<p><img src="image/4.jpg"/></p>
<p><img src="image/3.jpg"/></p>
<p><img src="image/2.jpg"/></p>
<p><img src="image/1.jpg"/></p>
</div>

Answer 1

Here is a way using pure JavaScript. Check it out here.

var sort = document.getElementById('sort-this-div');
var imgs = sort.getElementsByTagName('img');

var i, img, sorted = [];
for(i = 0; (img = imgs[i]); i++){
    sorted.push(img.getAttribute('src'));
}
sorted = sorted.sort(function(a, b){
    return +b.match(/\/(\d+?)\.jpg/)[1] - +a.match(/\/(\d+?)\.jpg/)[1];
});

for(i = 0; (img = imgs[i]); i++){
    img.src = sorted[i];
}​

What this does, it copies all of the src paths for your images into the sorted variable, sorts them, and then updates all of the image’s src paths with the new sorted order.

UPDATE

Added the custom sort function to address the problem brought up by @EugeneXa