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

我想根据一个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/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>​

/* 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);

到此

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

您可以使用jquery的排序插件

小提琴-

---

下面是一种使用纯JavaScript的方法

它将图像的所有src路径复制到

sorted

变量中，对它们进行排序，然后用新的排序顺序更新图像的所有src路径

更新

添加了自定义排序函数以解决@EugeneXa所带来的问题。

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>

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

/* 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);

​

---

这里唯一的问题是“2.jpg”最终大于“10.jpg”，但我不确定它是否需要按数字或字母顺序排序。如您所见，我们比较的是图像src，而不是图像文件名。代码可以被更新以获取图像文件名，而不需要扩展名，并进行相应的比较。如果可以，应该首先使用前导零将文件重命名为可排序格式。老实说，

2.jpg

应该总是排在

10.jpg

后面，就像

b

总是排在

a

后面一样-你必须像计算机一样思考，记住这些是字符串。。。不是隐藏在字符串中的整数。