javascript - 如何按图片名称降序排列div内容？

Question

我想根据图像名称按降序对 div 进行排序。

由此改变:

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

对此

<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

这是一种使用纯 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];
}​

它的作用是，将图像的所有 src 路径复制到 sorted 变量中，对它们进行排序，然后使用新的排序顺序更新图像的所有 src 路径。

更新

添加自定义排序功能，解决@EugeneXa提出的问题