Question

我想根据他们的图像名称通过DESCENDING顺序对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

带来的问题

Answer 2

<强> HTML：

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

<强> JavaScript的：

/* as option:
function sort(container) {
    var images = [],
        paragraphs = container.getElementsByTagName('p');        
    while(!!paragraphs.length) {
        var p = paragraphs[0];
        images.push(p.getElementsByTagName('img')[0].getAttribute('src'));
        container.removeChild(p);
    }
    images = images.sort();
    console.log(images);
    for(var i = images.length; i-- > 0;) {
        var p = document.createElement('p'),
            img = document.createElement('img');
            img.src = images[i];
            p.appendChild(img);
        container.appendChild(p);
    }
}*/

function sort(container) {
    var images = [],
        imageSources = [],
        paragraphs = container.getElementsByTagName('p');        
    for(var i = paragraphs.length; i-- > 0;) {
        var img = paragraphs[i].getElementsByTagName('img')[0],
            src = img.getAttribute('src');
        images.push(img);
        imageSources.push(src);
    }
    imageSources = imageSources.sort();
    console.log(imageSources);
    for(var i = imageSources.length; i-- > 0;) {
        images[i].src = imageSources[i];
    }
}

var container = document.getElementById('sort-this-div');
sort(container);

Fiddle

Answer 3

您可以使用jquery http://qd9.co.uk/projects/jQuery-Plugins/sort/demo.html

的排序插件

小提琴 - http://jsfiddle.net/tariqulazam/PuUn5/

$(document).ready(function(){
    $("p img").sort(function(a, b){
        return $(a).attr('src') > $(b).attr('src') ? -1 : 1;
    });
});

如何按图像名称按降序排序Div内容？

3 个答案: